如何停止for循环中的setTimeout?

Question

有一个需求
每间隔10秒向一个div中输出一段文字,当循环50次以后从0开始重新循环直到点击关闭按钮停止循环,怎么实现呢?

下面是我之前写的代码,但是cleartimeout没有生效,因为for循环又将settimeout激活了,又什么好的方法吗?

for (let i = 0, len = this.params.playTimes + 1; i < len; i++) {
    this.playText = setTimeout(() => {
        this.fillText(i);
        var myDate = new Date();
        console.log(i,myDate.toLocaleString());
    }, i * this.params.speed * 1000);
}
// setTimeout在for中被重新激活 todo
clearTimeout(this.playText);

Answer 1

如果是要每隔十秒触发一次，50次后终止，为何不用setInterval呢？

let count = 50
let intervalKey = setInterval(() => {
  // do things
  console.log('do')
  if (--count === 0) clearInterval(intervalKey)
}, 10 * 1e3)

Answer 2

你每次调用setTimeout都会创建一个定时器啊……如果你只清除最后一个定时器的话没有用

一种解决办法是维护一个定时器列表，按钮关闭的时候对整个列表调用clearTimeout
第二种方法是维护一个“需要定时刷新”Flag，计时器内的函数通过setTimeout递归调用自身，并在递归前检查这个Flag，如果Flag被按钮置为false就退出递归

Answer 3

我觉得用setInterval，clearInterval, 配合一个计数器变量不是更好用吗? 到了50次后，将计数器重置为1. 停止按钮点击后，调用clearInterval停止。

var count = 1;
var fixTextInterval = setInterval(function() {
        dosomething();
        count++;
        if(count > 50) count = 1;
   }, speed*1000);

btnStop.click(function() {
    clearInterval(fixTextInterval);
});