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

【问题标题】：How to stop a setInterval fired by mouseenter, upon mouseleave?如何在 mouseleave 时停止由 mouseenter 触发的 setInterval？
【发布时间】：2018-11-03 14:25:36
【问题描述】：

我已经设法让箭头在mouseenter 上滚动div 的溢出来工作。问题是脚本不仅不会在mouseleave 上停止，而且会阻止手动滚动对面的 div。

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 上被停用。

【问题讨论】：

您的代码几乎是正确的，除了以下几点：您在scroll_right 中定义了timer，因此您无法在kill 中访问它。因此，将var timer; 放在两个函数之外，然后在scroll_right 中将var timer = ... 替换为timer = ...。
@alx 注意到scroll_right 函数在一段时间后设置了无限多个计时器。请参阅我的答案以获得解决方案
@AnsonYeung 哎呀，你说得对，这是timer 变量范围无效之后的下一个大问题。

标签： javascript scroll setinterval mouseover mouseenter

【解决方案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">

【讨论】：

对不起，愚蠢的错误，我已经编辑了答案，现在它工作正常，你也可以试试。

【解决方案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>

【讨论】：

谢谢！完美运行！

【解决方案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)
}

【讨论】：