Angular 12 TypeScript中setTimeout后调用函数报错该如何解决？

问题原因 #

你当前代码的报错来自两个低级错误，和技术方案选型无关：

1. setTimeout 第一个参数需要传入函数引用，但你写的saveAsDraft(this.blog)是直接执行该函数，执行返回的undefined会被当做回调传入setTimeout，触发类型错误，而且函数会立即执行而非延迟5秒触发。
2. 调用类实例方法需要加this.前缀，同时要保证回调内部的this指向组件实例。

解决方案 #

这个场景只是简单的延迟触发逻辑，不需要额外引入callback或者promise，修正setTimeout的传参即可，推荐用箭头函数的写法：

draftSecond(formValue: string) {
    clearTimeout(this.typingTimer);
    // 箭头函数会继承外层的this指向，不需要额外绑定
    this.typingTimer = setTimeout(() => {
        this.saveAsDraft(this.blog);
    }, this.doneTypingInterval);
}

也可以用bind绑定this和参数：

draftSecond(formValue: string) {
    clearTimeout(this.typingTimer);
    this.typingTimer = setTimeout(this.saveAsDraft.bind(this, this.blog), this.doneTypingInterval);
}

扩展说明 #

如果后续你需要实现多个延迟任务的顺序调度、取消、错误统一处理等复杂逻辑，可以根据你的技术栈选对应方案：

• 普通JS/TS场景用Promise封装setTimeout即可
• Angular场景更推荐用RxJS的timer操作符，和框架生态适配性更好

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