Javascript 错误RangeError:使用setTimeout时超出了最大调用堆栈大小

我正在尝试实现一种方法，在固定的时间间隔后，角度材质选项卡会发生变化。我尝试在JavaScript中使用setInterval，但它的工作不太可靠（选项卡更改是随机发生的）。 下面发布的代码可以工作，但几个小时后浏览器会冻结，控制台会显示此错误：

错误范围错误：超过最大调用堆栈大小

我尝试在setTimeout方法中传递transitionSpeed，如下所示：

setTimeout(this.setIndex, this.transitionSpeed, this.transitionSpeed);

setIndex(transitionSpeed: number, selectedIndex: number, matTabLength: number) {
    this.selectedIndex = (selectedIndex + 1) %.matTabLength;
    if (this.isAnimationPlaying) {
        setTimeout(this.setIndex, transitionSpeed, selectedIndex, matTabLength);
    } else {
        clearTimeout();
    }
}

但如果再次调用该方法，则this.transitionSpeed为null

非常感谢您的帮助

编辑：

将代码更改为此，但数小时后仍出现相同错误：

togglePlay(): void {
    this.isAnimationPlaying = !this.isAnimationPlaying;
    if (this.isAnimationPlaying) {
        this.setIndex();
    } else {
        clearTimeout(this.timerId);
    }
}

setIndex() {
    this.selectedIndex = (this.selectedIndex + 1) % this.matTabLength;
    this.changeDetectorRef.detectChanges();
    if (this.isAnimationPlaying) {
        clearTimeout(this.timerId);
        this.timerId = setTimeout(this.setIndex.bind(this), this.transitionSpeed);
    } else {
        clearTimeout(this.timerId);
    }
}

EDIT2: 更改选项卡时，将调用TabChange事件。 代码：

这是唯一一个在超时旁边调用的方法。根据这一点，必须有一个一直被调用的接收方法

。返回计时器id，然后在中使用该id将其清除：

timerId = setTimeout(this.setIndex.bind(this), this.transitionSpeed);      

---

。返回计时器id，然后在中使用该id将其清除：

timerId = setTimeout(this.setIndex.bind(this), this.transitionSpeed);      

---

---

可能重复的可能重复的我试过这个，几个小时后我仍然得到相同的错误。我的编辑中的代码已更改。我尝试了这一次，但几个小时后仍然出现相同的错误。我的编辑中的代码已更改

timerId = setTimeout(this.setIndex.bind(this), this.transitionSpeed);      

clearTimeout(timerId);