clearInterval函數沒有實際清除

div從左到右和從右到左完成一輪滾動，但卡在scrollBack()函數中。該程序確實在所需的事件中執行了clearInterval()語句，但它並未真正清除間隔。我究竟做錯了什麼？clearInterval函數沒有實際清除

var backint = null; 

function scrollForward() { 
    if ($("#foo").scrollLeft() != $("#foo").width()) { 
    $("#foo").scrollLeft($("#foo").scrollLeft() + 1); 
    } else { 
    backint = setInterval(scrollBack, 5); 
    } 
} 

function scrollBack() { 
    if ($("#foo").scrollLeft() != 0) { 
    $("#foo").scrollLeft($("#foo").scrollLeft() - 1); 
    } else if ($("#foo").scrollLeft() == 0) { 
    clearInterval(backint); 
    } 
}

來源

2016-11-24 magoo

請分享HTML代碼。謝謝 – HenryDev

我可能是錯的，但我不確定在scrollBack函數中使用的backint是否被javascript正確理解，因爲它似乎是一個局部變量。嘗試啓動它爲全球 –

if（$（「＃foo」）。scrollLeft（）> 0）{...？並使其他如果只是一個其他 – Bindrid

這是更好做 .animate()爲Rory McCrossan建議，因爲這setInterval重新實現現有的東西，不一定好：

var foo = $("#container"), 
 
    bar = $("#foo"), 
 
    scrollSize = bar.width() - foo.width();; 
 

 
function scrollForward() { 
 
    console.log('forward', foo.scrollLeft(), bar.width() - foo.width()); 
 
    if (foo.scrollLeft() != scrollSize) { 
 
    foo.animate({ 
 
     scrollLeft: scrollSize + 'px' 
 
    }); 
 
    } 
 
} 
 

 
function scrollBack() { 
 
    console.log('back', foo.scrollLeft(), scrollSize); 
 
    if (foo.scrollLeft() === scrollSize) { 
 
    foo.animate({ 
 
     scrollLeft: '0px' 
 
    }); 
 
    } 
 
} 
 

 
foo.on("click", scrollForward); 
 
foo.on("dblclick", scrollBack);

#container { 
 
    border: 1px solid #ccc; 
 
    width: 410px; 
 
    overflow-x: scroll; 
 
    height: 50px; 
 
} 
 
#foo { 
 
    background-color: #ccc; 
 
    width: 1300px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="container"> 
 
    <div id="foo">Click to scroll right. Double-click to scroll left.</div> 
 
</div>

來源

2016-11-24 19:55:01 Annarfych

clearInterval函數沒有實際清除

回答

相關問題