时间戳

首页 > 解决方案 > 如何在 mouseleave 时停止由 mouseenter 触发的 setInterval？

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

问题描述

我已经设法让箭头滚动一个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。

标签： javascriptscrollsetintervalmouseovermouseenter

解决方案

您只需要创建一个将存储 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">

推荐阅读