clearTimeout не очистить его каждый раз

голоса
1

Я пытаюсь построить carouselчто:

  • Имеет автоматический таймер (каждые X секунд)
  • Имеет стрелки (что, когда используется, должен сбросить автоматический таймер на Е секунды снова)

Я имел это с помощью setInterval функции, но проблема была еще хуже, так что я решил изменить его SetTimeout и называть его рекурсивно.

Так что я:

Переменная таймера

this.timeOut = false;

Эти две функции, чтобы включить карусель или остановить его:

stopSlide() {
    console.log('stop', this.timeOut);
    if (this.timeOut) {
        window.clearTimeout(this.timeOut);
        this.timeOut = null;
        delete this.timeOut;
    }
}

startSlide() {
    this.stopSlide();
    const hasMoreThanOneSlide = this.ribbon.querySelectorAll('.pts-desktop-header-ribbon__item').length > 1;
    this.timeOut = hasMoreThanOneSlide ? window.setTimeout(() => this.doPlay(this.play), this.time) : null;
    console.log('start', this.timeOut);
}

И это один, который играет его (удаление ВАРА некоторых индексный и прочего, так что вопрос не слишком велик):

doPlay(element) {
    const newScroll = element.classList.contains(BUTTON_LEFT_CLASS) ? 1 : -1;
    const totalItems = this.el.querySelectorAll(`.${BASE_LIST_ITEM}`).length - 1;

    /* Update current */
    this.current++; // this wasn't like this cause actually i can turn +1 or -1 but I don't want to make this question longer

    /* Update visible */
    this.lists.forEach((list) => {
        list.style.transform = `translate(${-this.current * 100}%)`;
    });

    /* Update visible class */
    this.updateCurrentRibbonElement();
    if (this.timeOut) {
        this.stopSlide();
        this.startSlide();  // Calls the setTimeout function again
    } else {
        this.stopSlide();
    }
}

И это, как я инициализировать его:

events.delegate(this.el, `.${BUTTON_CLASS}`, 'click', (e) => {
    this.stopSlide();
    this.doPlay(e.elementTarget);
    this.hideRibbon();
});

/* Start interval */
this.startSlide();

Полный класс (в синтаксисе WebPack) можно найти здесь: https://jsfiddle.net/toz4xafu/

Таким образом, проблема в том, что иногда , при помощи стрелок очень быстро (Подчеркивая приложение) , кажется, не очищая this.timeOutвар , и это несколько раз исполненных (вместо 7 секунд это 2-4 секунды)

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

Кстати, есть ли способ отладки, сколько Тиммерса выполняется?

Задан 27/11/2018 в 15:03
источник пользователем
На других языках...                            

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more