Почему моя функция Javascript не срабатывает непрерывно с помощью setTimeout / clearTimeout? - PullRequest
Новая
       65

Почему моя функция Javascript не срабатывает непрерывно с помощью setTimeout / clearTimeout?

0 голосов
/ 06 апреля 2020

У меня есть веб-страница, над которой я работаю, с каруселью, которая автоматически переключается между 4 продуктами / изображениями. Но он также имеет функцию наведения, которая должна останавливать автоповорот и отображать только тот продукт, на котором находится пользователь, а автоповорот возобновляется после наведения. У меня это работает по большей части. Функция зависания работает так, как задумано, проблема в том, что автоповорот повторяется только один раз. Почему он не продолжает циклически повторяться, несмотря на мою функцию setTimeout для 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...

Спасибо !

1 Ответ

0 голосов
/ 06 апреля 2020

Используйте 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(), чтобы запустить их снова.

...