实战实现一个h5转盘抽奖页面，谈谈代码实现，顺便谈一下优化和数据处理

代码地址

前言

这个组件是我写过的关于移动端h5活动转盘抽奖的页面，当时写完以后肯定挺好看、挺炫的，因此就把它单独出来了，之后再写相似的页面，能够参考其中的一些实现原理！

主要用到的技术

• 用Math.random()方法实现一个区间的随机数，用于实现每次用户点击抽奖的时候，随机获得转盘须要所转的盘数。代码原理以下：

//获取一个介于某两个数之间的
    function getRandomNumber(min,max){
        return Math.floor(Math.random() * (max - min)) + min;
    };复制代码

• 在实现转盘的时候，用到了两个随机数，一个较小，一个较大，主要用来分别控制指针和奖品转盘以不一样的速度旋转，用以给用户实现视差！

• 转盘旋转以前，用不一样的初始角度表明不一样的不一样的奖品，那么最后转盘要转的角度就是:随机数n 360。好比“xx奖品”的默认角度相对于转盘是45度，抽奖的时候，获得的随机数是2，那么转盘就应该转2 360 + 45 = 765度。这样就能把每次转盘所转的角度跟产品对应起来了！

• 动画实现方面主要用到了setTimeout和window.requestAnimationFrame，可是主要在用setTimeout的时候，为了防止动画的抖动，应该保证1s中绘制60帧页面，也就是说，转盘要转3圈，用时3秒的话，那么每调一次setTimeout方法，转盘所转的角度就是：

var perAngle = 3 * 360 / 3 * 60;//6°复制代码

• 写完这段代码，是在pc上查看效果的，在手机上产看效果的时候，会出现抽奖页面图片加载慢以及旋转闪烁灯有点卡顿的问题，咱们能够分别采用下面的方法解决：

一、图片加载慢的问题，咱们能够采用一种最原始、最笨、最省钱的方法（其它方法可使用cdn等等，这里不介绍）——预加载解决，方法就是在进入本页面以前，在同一个服务器的其它页面把对应的图片加载一遍，这样当进入到当前的页面，须要加载的图片已经在缓存中了，因此此时再加载这些图片就会快从缓存中直接拿图片，速度就会杠杠的！如（须要在b页面图片1，咱们能够在a页面中先加载一次，记住，a页面和b页面在同一个服务器下）：

<!--a页面-->
    <div>
        <img src="图片1" />
    </div>


    <!--b页面-->
    <!--此时加载图片固然就是从缓存中拿到的图片-->
    <div>
        <img src="图片1" />
    </div>复制代码

二、闪烁灯卡顿的，问题，能够调节响应图片的动画的更新频率解决

• 另外，为了防止用户屡次点击抽奖，屡次向后台发送数据，对ajax请求进行了必定的处理，固然了，也为了防止连续点击抽奖按钮，屡次动画，也进行了响应的处理，主要思路就是点击抽奖的时候，显示一个遮罩层，这个遮罩层的z-index大于抽奖按钮，这样就阻止了用户再次点击抽奖按钮，最后抽奖成功以后，再把这个遮罩层隐藏。主要原理代码以下：

var isRequesting = false;
    function getData(){
        //若是当前用户正在进行抽奖，那么就返回
        if(isRequesting)return false;
        isRequesting = true;
        //显示遮罩层
        $("._mask").css('display','block');
        //其他代码省略
        $.ajax({
            url:server_api_address,
            type:'GET',
            success : function(data){
                isRequesting = false;
                //其他代码省略


                //当前转盘动画完成以后
                //再隐藏遮罩层
                animationComplate(function(){
                    $("._mask").css('display','none');
                });
            },
            error:function(data){
                //代码省略
            }
        });
    };复制代码

须要改进的地方

• 目前来看，我以为惟一有点欠缺的地方就是：转盘和指针的旋转速度老是匀速的，很难带给用户那种惊心动魄、期待的真实抽奖的感受。因此转盘的速度算法方面应该作一些改进！让抽奖更接近真实感受！

• 固然其它一些地方问题，这里就不注重谈了，由于涉及到具体的先后台对接问题！