setInterval定时器停止后，再重新启动

1.数据自动滚动显示（动态添加）

<li>
    <div class="FULeTi">
        <div class="SLeName">省份名称</div>
        <div class="SLeOne">三级</div>
        <div class="SLeTwo">四级</div>
        <div class="SLeThr">五级</div>
    </div>
    <div class="LeContent mouseStop01">
             <div class="LeConW LeSubFront01"></div>
     </div>
                            
</li>

function initleftdiv(datas){
    $(".LeSubFront01").empty();
    $.each(datas,function(i,p){
        if(i < 22){
            $(".LeSubFront01").append('<div class="LeConSubOne"><div class="LeSub01">'+
                    p.QQLATN_NAME+'</div><div class="LeSub03">'+
                    p.QQ30+'</div><div class="LeSub03"><span>'+
                    p.QQ40+'</span></div><div class="LeSub03"><span>'+
                    p.QQ50+'</span></div></div>');
        }
    });
    
        var count = 21;//目前显示的最后一个元素下标
        var ivou = setInterval(function moveSet(){
    //            删除第一个元素把数组最后一个元素放到倒数第一个
            
                if(++count == datas.length){
                    count = -1;
                    return;
                }
                $(".LeSubFront01 .LeConSubOne:eq(0)").remove();
                var tmp = datas[count];
                $(".LeSubFront01").append('<div class="LeConSubOne"><div class="LeSub01">'+
                        tmp.QQLATN_NAME+'</div><div class="LeSub03">'+
                        tmp.QQ30+'</div><div class="LeSub03"><span>'+
                        tmp.QQ40+'</span></div><div class="LeSub03"><span>'+
                        tmp.QQ50+'</span></div></div>');
            
        }, 1000);
    
}

2.需求：鼠标移入，定时器停止滚动。鼠标移出，恢复自动滚动。

①设置一个全局变量等于true。

var mouseoverStop = true;

②在setInterval定时器中加一个if判断

if(mouseoverStop == true ){}

③鼠标移入移出时，进行mouseoverStop判断。mouseoverStop == true时启动定时器。mouseoverStop == false时关闭定时器

$(".mouseStop01").mouseover(function(){
        mouseoverStop = false;
    }).mouseout(function(){
        if(mouseoverStop == false){
            mouseoverStop = true;
        }
 });

此时，定时器的关闭与启动问题解决了。

3.但出现了一个bug，鼠标移入class="mouseStop01"区域时，定时器看似停止，但mouseover时鼠标在这个区域中，还是不停的判断mouseoverStop。如下

setInterval定时器停止后，再重新启动

原因：setInterval每隔1s钟会进行一次if(mouseoverStop == true ){ }的判断。

解决方案：mouseover时，mouseoverStop == false，添加一个遮罩层。mouseout时，遮罩层隐藏。

if(mouseoverStop == false){    $(".mouseStop02").show();}

附全文代码：

html

<li>
    <div class="FULeTi">
        <div class="SLeName">省份名称</div>
        <div class="SLeOne">三级</div>
        <div class="SLeTwo">四级</div>
        <div class="SLeThr">五级</div>
    </div>
    <div class="LeContent mouseStop01">
        <div class="LeConW LeSubFront01"></div>
        <div class="mouseStop02"></div> 
    </div>
                            
</li>

css

.mouseStop01{    display: block;}
.mouseStop02{  width: 99%;  height: 45rem;  display: none;     position: absolute;    z-index: 99;    background-color: rgba(0,0,0,0);

var mouseoverStop = true;
function initleftdiv(datas){
    $(".LeSubFront01").empty();
    $.each(datas,function(i,p){
        if(i < 22){
            $(".LeSubFront01").append('<div class="LeConSubOne"><div class="LeSub01">'+
                    p.QQLATN_NAME+'</div><div class="LeSub03">'+
                    p.QQ30+'</div><div class="LeSub03"><span>'+
                    p.QQ40+'</span></div><div class="LeSub03"><span>'+
                    p.QQ50+'</span></div></div>');
        }
    });
    
        var count = 21;//目前显示的最后一个元素下标
        var ivou = setInterval(function moveSet(){
    //            删除第一个元素把数组最后一个元素放到倒数第一个
            if(mouseoverStop == true ){
                if(++count == datas.length){
                    count = -1;
                    return;
                }
                $(".LeSubFront01 .LeConSubOne:eq(0)").remove();
                var tmp = datas[count];
                $(".LeSubFront01").append('<div class="LeConSubOne"><div class="LeSub01">'+
                        tmp.QQLATN_NAME+'</div><div class="LeSub03">'+
                        tmp.QQ30+'</div><div class="LeSub03"><span>'+
                        tmp.QQ40+'</span></div><div class="LeSub03"><span>'+
                        tmp.QQ50+'</span></div></div>');
            }
        }, 1000);
        
    $(".mouseStop01").mouseover(function(){
        mouseoverStop = false;
        if(mouseoverStop == false){    $(".mouseStop02").show();}
    }).mouseout(function(){
        if(mouseoverStop == false){
            mouseoverStop = true;
           $(".mouseStop02").hide();
        }
    });
    
}

setInterval定时器停止后，再重新启动

相关推荐