如何在mouseleave時停止mouseenter觸發的setInterval？

Question

我已經成功地得到它在滾動一個div的溢出箭頭mouseenter工作。 問題在於該腳本不僅不會在mouseleave停止，而且會阻止手動滾動div的另一側。

JS

function scroll_right() {
        var elmnt = document.getElementsByClassName("thumbnails")[0];
            elmnt.scrollLeft += 50;
        var timer = setInterval(scroll_right, 300); 
}

function kill() {
        clearInterval(timer)
}

和箭頭

<img class="arrow" 
 onmouseenter="scroll_right()"
 onmouseleave="kill()" 
 src="https://image.flaticon.com/icons/svg/126/126490.svg">

我的想法是， scroll_right功能大干快上發射mouseenter和timer它里面，大干快上禁用mouseleave 。

Answer 1

您只需創建一個全局計時器變量即可存儲setInterval（）值，以便可以使用它停止setInterval的運行。

    var timer = undefined;

    function scroll_right() {
        var elmnt = document.getElementsByClassName("thumbnails")[0]; 
        elmnt.scrollLeft += 50;
        timer && clearInterval(timer);
        timer = setInterval(scroll_right, 300); 
    }

    function kill() {
        timer && clearInterval(timer)
    }

---------這是html代碼

<img class="arrow" 
 onmouseenter="scroll_right()"
 onmouseleave="kill()" 
 src="https://image.flaticon.com/icons/svg/126/126490.svg">

Answer 2

每次scroll_right函數運行時都會設置計時器。 一段時間后的某個時間將運行無限多個計時器。 您可以嘗試使用setTimeout函數而不是下面的函數。 同樣，計時器的范圍僅限於代碼中的功能。

 var timer = undefined; function scroll_right() { var elmnt = document.getElementsByClassName("thumbnails")[0]; elmnt.scrollLeft += 50; if (!timer) { timer = setInterval(scroll_right, 300); } } function kill() { if (timer) { clearInterval(timer); timer = undefined; } } 

 <div class="thumbnails" onmouseenter="scroll_right()" onmouseleave="kill()" style="width:150px;overflow:auto"> <img class="arrow" src="https://image.flaticon.com/icons/svg/126/126490.svg" width="500px"> </div> 

Answer 3

您需要在函數外部聲明計時器變量以供其他函數使用將JS替換為：

var timer;
function scroll_right() {
    var elmnt = document.getElementsByClassName("thumbnails")[0];
    elmnt.scrollLeft += 50;
    timer = setInterval(scroll_right, 300); 
}

function kill() {
    clearInterval(timer)
}