为什么我的 Javascript 函数不使用 setTimeout/clearTimeout 连续触发？答案

【问题标题】：Why isn't my Javascript function continuously firing with setTimeout/clearTimeout?为什么我的 Javascript 函数不使用 setTimeout/clearTimeout 连续触发？
【发布时间】：2020-04-06 00:43:28
【问题描述】：

我有一个网页，我正在使用一个可以在 4 个产品/图像之间自动旋转的旋转木马。但它也有一个悬停功能，需要停止自动旋转并仅显示用户悬停的产品，然后自动旋转恢复悬停。我大部分时间都在工作。悬停功能按预期工作，问题是自动旋转仅循环一次。尽管我的 autoRotate() 的 setTimeout 函数再次调用自身，为什么它不继续循环？

相关的 JS 代码，为简洁起见做了一些修改：

// Run autoRotate() on page load
$(document).ready(function () {
    autoRotate();
});

// Place timeout functions for each product's function into 
// a variable so the timeout can be cleared on hover
let product2Timer = setTimeout(setProduct2, 3000);
let product3Timer = setTimeout(setProduct3, 6000);
let product4Timer = setTimeout(setProduct4, 9000);
let autoRotateTimer = setTimeout(autoRotate, 12000);

// Main function
function autoRotate() {
    setProduct1();
    product2Timer ;
    product3Timer ;
    product4Timer ;
    autoRotateTimer; // <--- This should call autoRotate() again (but it doesn't)?
}

// On product name hover, clear the timeouts so the rotator doesnt keep cycling on hover
// Off product name hover, reset timeouts and resume/call autoRotate() function
$(function () {
    $(".rotator-item").hover(function () {
        clearTimeout(product2Timer);
        clearTimeout(product3Timer);
        clearTimeout(product4Timer);
        clearTimeout(autoRotateTimer);
    },
        function () {
            product2Timer = setTimeout(setProduct2, 3000);
            product3Timer = setTimeout(setProduct3, 6000);
            product4Timer = setTimeout(setProduct4, 9000);
            autoRotateTimer = setTimeout(autoRotate, 12000);
            autoRotate();
        });
});

function setProduct1() {
    // Set product info/img/description etc...
}

function setProduct2() {
    // Set product info/img/description etc...
}

function setProduct3() {
    // Set product info/img/description etc...
}

function setProduct4() {
    // Set product info/img/description etc...
}

//
// On hover styling/code
//
$(function () {
    $(".product-1").hover(function () {
        // Mouse over code
    },
        function () {
           // Mouse out code...
        });
});

// Other 3 product hover functions...

谢谢！

【问题讨论】：

你认为product2Timer ; 是做什么的？
听起来你想要setInterval()，而不是setTimeout()。
我以为setTimeout会在时间到后再次调用该函数。我让它早点工作。但我猜它正在工作，因为我在 autoRotate 函数中声明了超时变量（这导致了其他问题）。我会研究一下两者之间的区别。谢谢
setTimeout() 在 N 毫秒内运行一次函数。 setInterval() 每 N 毫秒重复运行一次函数。
明白了，为什么它更早工作是有道理的，我每次调用都重新初始化它。嗬！谢谢，我试试 setInterval

标签： javascript jquery settimeout cleartimeout

【解决方案1】：

使用setInterval() 开始重复操作。使用setTimeout() 错开他们的开始时间。

var interval1, interval2, interval3, interval4;
function startRotation() {
    setTimeout(function() {
        interval1 = setInterval(setProduct1, 12000);
    }, 3000);
    setTimeout(function() {
        interval2 = setInterval(setProduct2, 12000);
    }, 6000);
    setTimeout(function() {
        interval3 = setInterval(setProduct3, 12000);
    }, 9000);
    setTimeout(function() {
        interval4 = setInterval(setProduct4, 12000);
    }, 12000);
};
startRotation();

然后，悬停处理程序可以清除所有 4 个间隔计时器，然后调用 startRotation() 重新启动它们。

【讨论】：