clearTimeout doesn't clear it everytime

Question

I'm trying to build a carousel that:

• Has an auto-timer ( every X seconds )
• Has directional arrows ( that when used, should reset the auto-timer to X seconds again )

I had this using the setInterval function but the problem was even worse, so I decided to change it for setTimeout and call it recursively.

So I have:

The timer variable

this.timeOut = false;

These two functions, to enable the carousel or stop it:

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

And this one that plays it (removing some index's vars and stuff so the question is not too large):

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

And this is how I init it:

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

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

Full class (in Webpack syntax) can be found here: https://jsfiddle.net/toz4xafu/

So the problem is, that Sometimes, when using the arrows very fast ( stressing the app ) seems that is not clearing the this.timeOut var and it's multiple times executed ( instead of 7 seconds it's 2-4 seconds )

The question is, how can I make sure that I won't have more than one timeout running?

By the way, is there any way to debug how many timmers are executing?