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