如何用箭头函数实现setTimeout递归并正确绑定类实例this指向

问题根因 #

你使用普通函数作为setTimeout回调时，类内部默认是严格模式，普通函数独立调用时this会指向undefined，因此无法正常访问类的currentIndex属性。
箭头函数的this是继承自外层作用域的，刚好符合你访问类属性的需求，但匿名箭头函数没有函数名可以直接自引用实现递归，需要先把箭头函数赋值给一个变量。

正确实现代码 #

public currentIndex: number = 0;

// 先将箭头函数赋值给变量run
const run = () => {
    this.currentIndex++;
    console.log(this.currentIndex) // 可以正常获取到类的currentIndex值
    setTimeout(run, 1000) // ??位置直接填变量名run即可
}
// 首次触发定时器
setTimeout(run, 1000)

其他可选方案 #

如果你不想额外声明变量，也可以用普通命名函数绑定this的方式实现，效果完全一致：

public currentIndex: number = 0;

setTimeout(function run() {
    this.currentIndex++;
    console.log(this.currentIndex);
    setTimeout(run.bind(this), 1000);
}.bind(this), 1000)

注意事项 #

如果后续需要停止这个递归定时器，记得保存每次的timeoutId，在需要停止的时候调用clearTimeout清除即可，避免内存泄漏。

内容的提问来源于stack exchange，提问作者Fab83i