javascript - 在超时循环中运行函数

Question

我有以下代码:

// After 8 seconds change the slide...
        var timeout = setTimeout("changeSlide()", 8000);

        $('div.slideshow').mouseover(function() {

            // If the user hovers the slideshow then reset the setTimeout
            clearTimeout(timeout);
        });

        $('div.slideshow').mouseleave(function() {

            clearTimeout(timeout);
            var timeout = setTimeout("changeSlide()", 8000);

        });

我想要发生的是让函数changeSlide每8秒循环运行一次，除非有人将鼠标悬停在幻灯片div上。当他们移除光标时，然后再次超时!

但是循环只发生一次，悬停不会停止超时或再次启动:/

编辑:

这个循环很好，但是悬停打开和关闭会导致该函数运行多次:

// After 8 seconds change the slide...
        var timeout = setInterval(changeSlide, 2000);

        $('div.slide').mouseover(function() {

            // If the user hovers the slideshow then reset the setTimeout
            clearInterval(timeout);
        });

        $('div.slide').mouseleave(function() {

            clearInterval(timeout);
            var timeout = setInterval(changeSlide, 2000);

        });

Answer 1

您这里有几个问题。首先，当您设置超时时，如果您可能想要停止它，则需要将该函数调用的返回值存储到一个变量中。

    var slide_timer = setTimeout(changeSlide, 8000);

其次，当您调用clearTimeout(而不是clearInterval)时，您需要向其传递一个参数。什么论据？调用 setTimeout

时存储的变量

        clearTimeout(slide_timer);

第三，当您使用setTimeout时，它只会触发一次。 setInterval 将继续触发，然后您可以使用 clearInterval 来停止它。

使用间隔而不是超时的计时存在问题。浏览器对它们的处理方式略有不同，对于您的代码来说，了解差异并使用正确的方法可能很重要。如果您使用间隔，因为它们只触发一次，所以每次触发时您都必须重新建立超时。

var slide_timer = setTimeout(function () {
    changeSlide();
    var slide_timer = setTimeout(changeSlide, 8000);
}, 8000);

或者

var slide_timer = setTimeout(changeSlide, 8000);
...
function changeSlide() {
   ... your code ...
    var slide_timer = setTimeout(changeSlide, 8000);
}

(我更喜欢前一种方法)

最后，无论您使用超时还是间隔，都不要将字符串传递给 setTimeout，而是传递函数引用。请参阅上面的示例代码，或者像这样:

var slide_timer = setTimeout("changeSlide()", 8000); // <--- DON'T
var slide_timer = setTimeout(changeSlide, 8000);     // <--- DO
var slide_timer = setTimeout(function () {           // <--- DO
    changeSlide() ;
    // other script
}, 8000); 

把它们放在一起:

// After 8 seconds change the slide...
    var slide_timer = setTimeout(changeSlide, 8000);
    $('div.slideshow').hover(function() {
        // If the user hovers the slideshow then reset the setTimeout
        clearTimeout(slide_timer);
    }, function() {
        slide_timer = setInterval(changeSlide, 8000);
    });

文档

• clearTimeout - https://developer.mozilla.org/en/DOM/window.clearTimeout
• setTimeout - https://developer.mozilla.org/en/DOM/window.setTimeout
• clearInterval - https://developer.mozilla.org/en/DOM/window.clearInterval
• setInterval - https://developer.mozilla.org/en/DOM/window.setInterval
• SO 答案讨论了间隔和超时之间的细微差别 - https://stackoverflow.com/a/7900293/610573