时间戳

首页 > 解决方案 > 为什么我的 Javascript 函数不使用 setTimeout/clearTimeout 连续触发？

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

问题描述

我有一个网页，我正在处理一个旋转木马，它可以在 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...

谢谢！

标签： javascriptjquerysettimeoutcleartimeout

解决方案

用于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()再次调用以启动它们。

推荐阅读