Javascript 如何阻止mouseenter在mouseleave上发射的setInterval？

我成功地获得了箭头，它可以在

mouseenter

上滚动显示div溢出。问题在于，脚本不仅不会在

mouseleave

上停止，而且会阻止手动滚动div的另一侧

JS

箭呢

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

---

我的想法是，

scroll\u right

函数在

mouseenter

上被触发，而它内部的

计时器在
mouseleave
上被禁用。您需要声明函数外部的计时器变量，以便由另一个函数使用
将您的JS替换为：

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

function kill() {
    clearInterval(timer)
}

您需要在函数外部声明计时器变量以供另一个函数使用
将您的JS替换为：

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

function kill() {
    clearInterval(timer)
}

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

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

每次运行
向右滚动
功能时，都会设置计时器。一段时间后，将有无限多个计时器同时运行。您可以尝试使用
setTimeout
函数代替下面的函数。此外，计时器的作用域仅限于代码中的函数。
var定时器=未定义；
函数滚动_right（）{
var elmnt=document.getElementsByClassName（“缩略图”）[0]；
elmnt.scrollLeft+=50；
如果（！计时器）{
定时器=设置间隔（向右滚动，300）；
}
}
函数kill（）{
中频（定时器）{
清除间隔（计时器）；
定时器=未定义；
}
}
每次运行
向右滚动
功能时，都会设置计时器。一段时间后，将有无限多个计时器同时运行。您可以尝试使用
setTimeout
函数代替下面的函数。此外，计时器的作用域仅限于代码中的函数。
var定时器=未定义；
函数滚动_right（）{
var elmnt=document.getElementsByClassName（“缩略图”）[0]；
elmnt.scrollLeft+=50；
如果（！计时器）{
定时器=设置间隔（向右滚动，300）；
}
}
函数kill（）{
中频（定时器）{
清除间隔（计时器）；
定时器=未定义；
}
}

您的代码几乎是正确的，除了以下几点：您在
向右滚动
中定义了
计时器，因此无法在
kill
中访问它。因此，设置
var定时器
在两个函数之外，然后在
scroll\u right
@alx中将
var timer=…
替换为
timer=…
，注意
scroll\u right
函数在一段时间后设置了无限多个计时器。请看我的答案solution@AnsonYeung哎呀，你说得对，这是继
定时器
变量的作用域无效之后的下一个大问题。你的代码几乎是正确的，除了以下几点：你在
滚动右键
中定义了
定时器
，因此你不能在
杀死
中访问它。因此，设置
var定时器
在两个函数之外，然后在
scroll\u right
@alx中将
var timer=…
替换为
timer=…
，注意
scroll\u right
函数在一段时间后设置了无限多个计时器。请看我的答案solution@AnsonYeung哦，你是对的，这是继
定时器
变量的作用域无效之后的下一个大问题。对不起，愚蠢的错误，我已经编辑了答案，现在它工作正常，你也可以尝试。对不起，愚蠢的错误，我已经编辑了答案，现在它工作正常，你也可以尝试。谢谢！很好用！非常感谢。很好用！