定时向后台发送请求获取中奖信息，并且当中奖信息超过5条的时候开始滚动

这个需要注意的是：

　　无论你怎么使用setInterval()，一定要注意【设表先关】，先clearInterval()

　　【否则】会产生的问题是：你的动画是越来越快，也就是setInterval嵌套使用时，内部的会越来越快，但是当先clearInterval之后这个问题就可以得到解决

1、如何定时向后台发送请求？setInterval();

// 使用setInterval定时器向后台发送请求时，一定要先清除定时器，然后再设置
clearInterval(outerTimer);
outerTimer = setInterval(getFromRD,60000);

　

2、getFromRD代码

// 每隔一段时间向后台发一次请求
var getFromRD= function() {
    var htmlStr = '';
    $.ajax({
        type:'get',
        url:'json/prizeList.json',
        dataType:'json', //注意因为这里使用的是测试数据prizeList.json，所以是json；换成线上url之后就要使用jsonp了
        success:function (data) {
            if(data.state < 0) {
                console.log('系统异常');
                return;
            }else {
                var data = data.data;
                var dataPrizeList = data.prizeList;
                // 一二三等奖区
                if (!!data.firstPrize) {
                    $(".firstprize").html(data.firstPrize.userName || '虚位以待');
                }
                if(!!data.secondPrize) {
                    $(".secondprize").html(data.secondPrize.userName || '虚位以待');
                }
                if(!!data.thirdPrize) {
                    $(".thirdprize").html(data.thirdPrize.userName || '虚位以待');
                }

                // 中奖展示区
                for(var i=0; i<dataPrizeList.length; i++) {
                    htmlStr += '<li>'+
                                '<span>'+dataPrizeList[i].userName+'</span>'+
                                '<span>抽中了</span>'+
                                '<span>'+dataPrizeList[i].prizeName+'</span>'+
                            '</li>';
                }

                $(".roll ul").html(htmlStr);

                prizeListRoll(); // 调用滚动动画
            }
        },
        error:function (err) {
            console.log(err)
        }
    });
}

3、滚动动画函数 prizeListRoll

// prizeListRoll

// 两个接收定时器的变量
var outerTimer, 
    innerTimer;

// 中奖列表滚动动画
var prizeListRoll = function () {
    // 中奖盒子
    var $roll = $(".roll");
    // 要滚动的盒子
    var $rollUl = $(".roll ul");
    var nowTop = 0;
    // 有几条中奖信息
    var liLength = $roll.find("li").length;
    // 每条中奖展示信息的高度
    var liHeight = $roll.find("li").outerHeight();
    // 所有中奖展示信息的高度
    var allLiHeight = parseInt(liHeight*liLength);
    // 滚动的速度
    var rollSpeed = 90;
    var timer;

    // 当中奖信息>=5时开始滚动
    if (liLength>=5) {
        // 拷贝所有的中奖信息li并追加到最后ul
        $rollUl.find('li').clone().appendTo($rollUl);
        // 滚动动画
        var listRoll = function () {
            nowTop -= 1;
            if (nowTop <= -allLiHeight) {
                nowTop = 0;
            }
            $rollUl.css("top",nowTop);
        }
        clearInterval(innerTimer);
        innerTimer = setInterval(listRoll,rollSpeed);
    }

    // 鼠标移动/离开盒子时的动画
    $roll.mouseenter(function () {
        clearInterval(innerTimer);
    }).mouseleave(function () {
        clearInterval(innerTimer);
        innerTimer = setInterval(listRoll,rollSpeed);
    });
}