如何在 mouseleave 时停止由 mouseenter 触发的 setInterval？

Question

我已经设法让 mouseenter 上 div 的溢出滚动的箭头起作用。问题是脚本不仅不会在 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

您需要在函数外声明计时器变量以供另一个函数使用用 :

替换你的 JS

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

function kill() {
    clearInterval(timer)
}

Answer 2

您只需创建一个全局计时器变量来存储 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 3

每次 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>

如何在 mouseleave 时停止由 mouseenter 触发的 setInterval？

How to stop a setInterval fired by mouseenter, upon mouseleave?

javascript

scroll

setinterval

mouseover

mouseenter