Как остановить setTimeout?

Question

[tereshock98]

У меня есть страница с посекционным перелистыванием (Scrollify.js).
На странице есть секция со слайдером.
Слайдер каждые 8 секунд меняет слайд.

Как сделать так, чтобы при перелистывании на другую секцию, весь setTimeout удалялся, а при возвращении на слайдер обратно начинал свое выполнение?

Ниже прикладываю код своего скрипта:

var timerInSlider;

$.scrollify({
    section: ".section",
    scrollbars: true,
    interstitialSection: ".non-full-height",
    overflowScroll: true,
    before: function(indexBigSlider, sections){
        if(indexBigSlider == 2) {

            timerInSlider = setTimeout(function(){
                $(".fullwidth-slider").trigger('owl.next');
                console.log("1 итерация");
            }, 12000);

            timerInSlider = setTimeout(function(){
                $(".fullwidth-slider").trigger('owl.next');
                console.log("2 итерация");
            }, 24000);

            timerInSlider = setTimeout(function(){
                $(".fullwidth-slider").trigger('owl.next');
                console.log("3 итерация");
            }, 36000);

            timerInSlider = setTimeout(function(){
                $(".fullwidth-slider").trigger('owl.next');
                console.log("4 итерация");
            }, 48000);
        }
    },
    after: function(indexBigSlider, sections){
        if(indexBigSlider == 3){
            console.log("След слайдер");
            clearTimeout(timerInSlider);
        }
    }
});

Answer 1

[dollar]

Вам нужно четыре разных таймера, то есть их идентификаторы нужно записывать в разные переменные. А в секции after, соответственно, четыре раза подряд вызвать clearTimeout()

//например
var timerInSlider1, timerInSlider2, timerInSlider3, timerInSlider4;

Вообще, по-хорошему, лучше сделать небольшой цикл, так будет красивее и правильнее с точки зрения повторного использования кода.

Как-то так:

//Минимальные изменения вашего кода
var timerInSlider = [1,2,3,4]; //массив для четырёх таймеров

$.scrollify({
    section: ".section",
    scrollbars: true,
    interstitialSection: ".non-full-height",
    overflowScroll: true,
    before: function(indexBigSlider, sections){
        if(indexBigSlider == 2) timerInSlider.forEach((e,i) => { //цикл

            timerInSlider[i] = setTimeout(function(){
                $(".fullwidth-slider").trigger('owl.next');
                console.log((i+1)+" итерация");
            }, 12000 * (i+1)); //время зависит от номера таймера

            //остальной код убрали
        });
    },
    after: function(indexBigSlider, sections){
        if(indexBigSlider == 3){
            console.log("След слайдер");
            //также в цикле убираем
            timerInSlider.forEach(e=>clearTimeout(e)); 
        }
    }
});