从 setTimeout() 方法调用函数答案

【问题标题】：Calling function from setTimeout() method [duplicate]从 setTimeout() 方法调用函数
【发布时间】：2018-04-28 20:14:34
【问题描述】：

也许你们很多人会觉得这个问题微不足道，但是经过 3 天没有任何答案的搜索后，我自己找到了答案，也许将来有人在搜索 google 时会需要上面的这个标题..

我必须明白为什么 A 有效而 B 无效？为什么我只能作为代表访问我的this.MarkContents_Input() 函数？

一个。

refreshInputStatistics(): void {
        this.updateprocessing();
        setTimeout(() =>
            this.MarkContents_Input(this.vc.returnEditor(staticEditorDirective.textAreaEnum.LeftTextArea))
            ,50);
    }

refreshInputStatistics(): void {
        this.updateprocessing();
        setTimeout(
            this.MarkContents_Input(this.vc.returnEditor(staticEditorDirective.textAreaEnum.LeftTextArea))
            ,50);
    }

我对前端 Web 开发非常陌生，也许我遗漏了什么（？）

编辑：我的问题被标记为重复，是的，我同意，现在我看到它重复了，但是这里的搜索关键字可以在将来帮助其他人（如上所述，不幸的是 3 天的搜索确实没有引导我回答第一个问题，本可以让我省去很多头痛...... )

【问题讨论】：

您是否在浏览器控制台中使用 B 出现错误？我认为 ot 是由于在 Typescript 中的映射
@NielsNet 是的，使用 B。this.MarkContents_Input() 未定义，Visual Studio IDE 也显示设计时错误。
那么问题是由于如果您不使用委托，它没有映射到刷新方法的源......
你的刷新方法是在课堂上吗？

标签： javascript typescript settimeout

【解决方案1】：

这是因为 this 在 Javascript 中的工作方式以及粗箭头函数 () => {} 如何绑定 this 上下文。对于 Javascript 的新手来说，这可能会非常令人困惑。这是一个陷阱，但另一方面它使 Javascript 变得强大（你可以使用somefunction.call(somethingWhatReplacesThis, whateverArguments)

A 选项基本上相当于这样。我希望它能更清楚地说明这一点。

refreshInputStatistics(): void {
        this.updateprocessing();
        var that = this; // store context for usage in setTimeout
        setTimeout(            that.MarkContents_Input(that.vc.returnEditor(staticEditorDirective.textAreaEnum.LeftTextArea))
            ,50);
    }

更深入的解释

setTimeout() 和其他回调函数在全局上下文中计算，其中this 关键字指向全局对象（通常为window，但这取决于函数执行的环境（浏览器、NodeJs , 网络工作者...) 因此，为了使其工作，您需要将上下文捕获到变量中。胖箭头函数会自动为您执行此操作，并转换为类似于上面示例的内容。

有用的链接

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this.

How does the "this" keyword work?

【讨论】：