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每隔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);

js

 

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(); } }); }