Question

我正在尝试构建一个carousel：

具有自动计时器（每X秒）
具有方向箭头（使用时应将自动定时器再次重置为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秒）

问题是，如何确保不会有一个以上的超时运行？

顺便问一下，有什么方法可以调试正在执行的微调器吗？

clearTimeout不会每次都清除它

0 个答案: