Question

我有一个函数，它将单击dom元素以显示和隐藏它们。

该功能正常运行并在dom元素中循环，但是由于使用的IIFE，调用该功能后我无法停止setTimeout。

我已经向全局空间添加了一个变量以打破循环，但是setTimeout已经启动，因此它永远不会停止。我还尝试为第一个setTimeout分配一个带有true / false标志的名称，以尝试捕获并停止循环中setTimeout的下一次迭代，但是由于我尝试停止setTimeout时控制台日志继续，因此未成功

function cycleSlides() {

    var slides = [1,2,3,4]
    var closeSlide = $(".close"); 

        for(var i = 0; i < slides.length; i++) {
            (function() {
                var x = i;

                setTimeout(function() {

                    if(x == 0) {
                        console.log("slides[x].click()")// first slide
                    } 
                    else {
                        setTimeout(function() { console.log("closeSlide.click()") }, 1000) // timeout for animation to finish when clicked
                        setTimeout(function() { console.log("slides[x].click()") }, 2000) // timeout for animation to finish when clicked
                    }

                    // CLOSE LAST SLIDE
                    if(x == slides.length - 1 ) {
                        setTimeout(function() {
                            console.log("closeSlide.click()")
                        }, x * 1000)
                    }
                }, x * 3000)
            }(i))
        }
     }

Answer 1

setTimeout()返回一个超时ID，该超时ID可以传递给clearTimeout()以取消超时。您可以将对setTimout()的调用返回的超时ID存储在数组中。然后，当您想取消它们时，使用值调用clearTimeout()并清除数组。该代码可能如下所示：


var timeouts = [];

function cancelTimeouts() {
    for (var i = 0; i < timeouts.length; i++) {
        clearTimeout(timeouts[i]);
    }

    timeouts = []
}

function cycleSlides() {

    var slides = [1,2,3,4]
    var closeSlide = $(".close"); 

        for(var i = 0; i < slides.length; i++) {
            (function() {
                var x = i;

                timeouts.push(setTimeout(function() {

                    if(x == 0) {
                        console.log("slides[x].click()")// first slide
                    } 
                    else {
                        timeouts.push(setTimeout(function() { console.log("closeSlide.click()") }, 1000)) // timeout for animation to finish when clicked
                        timeouts.push(setTimeout(function() { console.log("slides[x].click()") }, 2000)) // timeout for animation to finish when clicked
                    }

                    // CLOSE LAST SLIDE
                    if(x == slides.length - 1 ) {
                        timeouts.push(setTimeout(function() {
                            console.log("closeSlide.click()")
                        }, x * 1000))
                    }
                }, x * 3000))
            }(i))
        }
     }

在循环内的IIFE内取消setTimeout

1 个答案: