為什么我的 Javascript function 沒有通過 setTimeout/clearTimeout 連續觸發？

Question

我有一個網頁，我正在處理一個旋轉木馬，它可以在 4 個產品/圖像之間自動旋轉。 但它也有一個 hover 功能，需要停止自動旋轉並僅顯示用戶懸停的產品，然后自動旋轉恢復關閉 hover。 我大部分時間都在工作。 hover 功能按預期工作，問題是自動旋轉僅循環一次。 盡管我的 setTimeout function for autoRotate()再次調用自身，為什么它不繼續循環？

相關的 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...

謝謝！

Answer 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();

然后，hover 處理程序可以清除所有 4 個間隔計時器，然后調用startRotation()再次啟動它們。