在 JavaScript 中的异步回调函数中访问 "this"

Question

我如何实现从异步回调函数内部引用父级的 "this"，如下面的代码片段所示？

var imaginaryAjaxCall = function (fn) {
    setInterval(fn, 1000);
}

function parent() {
    this.foobar = "foo";

    imaginaryAjaxCall(function() {
       this.foobar = "bar"; 
    });
}

这是一个用于测试的 jsfiddle：http://jsfiddle.net/r0ueon53/11/

编辑： 我匆忙提出问题，把它搞砸了。很抱歉呈现一些与此编辑无关的评论。

Answer 1

Javascript 运行s 在单个线程上。当你在一个时间间隔上将 fn 设置为运行时，你访问了一个以异步方式运行的 DOM Api（即使它实际上不是异步的。）会发生什么是 DOM api 会在每次传递 interval 时向回调队列中插入一个回调。因此，每 0 毫秒（好吧，它实际上更接近 4 毫秒，但这是另一个话题）fn 将被插入到回调队列中。

现在，回调队列中的回调仅在调用堆栈为空时获得运行，因此，回调在

之后才会获得运行

document.getElementById('out').innerHTML = this.foobar;

是运行，这就是为什么它输出 "foo" 而不是 "bar"。

http://jsfiddle.net/r0ueon53/13/

如果您将该行延迟一秒钟，您将看到它输出 "bar"。

setTimeout(function () {
    document.getElementById('out').innerHTML = that.foobar;
}, 1000);

http://jsfiddle.net/r0ueon53/12/

这是有效的，因为 setTimeout 将在 1 秒后将其回调插入回调队列，因此在将值更改为 "bar".

的 setInterval 回调之后

显然，在处理 ajax 时，由于网络速度的差异，使用 setTimeout 来解决这个问题并不一致。您应该改为将 .innerHTML 向上移动到您传递给 ajax 调用的回调中。

在 JavaScript 中的异步回调函数中访问 "this"

Accessing "this" in asynchronous callback function in JavaScript

javascript

asynchronous

callback

this

setinterval