Why isn't my Javascript function continuously firing with setTimeout/clearTimeout?

Question

I have a webpage i'm working on with a carousel of sorts which auto rotates between 4 products/images. But it also has a hover feature which needs to stop the auto rotate and display just the product a user hovers on, and auto rotate resumes off hover. I have it working for the most part. The hover functionality is working as intended, problem is the auto rotate only cycles through one time. Why doesn't it keep cycling through despite my setTimeout function for autoRotate() calling itself again?

Relevant JS code with some edits for brevity and what not:

// 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...

Thanks!

Answer 1

Use setInterval() to start a repeating action. Use setTimeout() to stagger their start times.

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

The hover handler can then clear all 4 interval timers, and then call startRotation() to start them again.