Question

我不熟悉JavaScript。我有一个下面的对象（Foo.bar）我想要每隔100毫秒从队列中提取和打印项目。

var Foo = Foo || {};
Foo.bar = {
    initialize: function () {
        this.feedQueue();
        this.consumeQueue();
    },
    queue: [],
    consumeQueue: function () {
        if (this.queue > 0) {
            var item = this.queue.shift();
            console.log(item);
        }
        setTimeout(function () {
            this.consumeQueue();
        }, 100);
    },
    feedQueue: function () {
        this.queue.push(Math.random());
        setTimeout(function () {
            this.feedQueue();
        }, 100);
    }
};
Foo.bar.initialize();

在consumeQueue函数＆＃34; this.queue＆＃34;从不更新。它总是空的。

任何人都可以帮助我解决我的错误吗？

Answer 1

您需要bind超时功能的范围，否则this具有不同的上下文。

setTimeout((function () {
    this.consumeQueue();
}).bind(this), 100);

的 Fiddle

Answer 2

为什么要绑定，为什么参数？

setTimeout((function () {
    Foo.bar.consumeQueue();
}), 100);

Answer 3

在您的回调函数中this等于window，因为在调用回调时省略了this。

正如RienNeVaPlus在他的回答中所说，你可以像这样使用绑定

setTimeout((function () {
    this.consumeQueue();
}).bind(this), 100);

OR 您可以将this作为参数传递给您的callack功能

setTimeout(function (context) {
    context.consumeQueue();
}, 100, this);

在这两种情况下，如果您使用IE作为浏览器，至少需要IE9。

Answer 4

作为绑定或传递给回调函数的最终替代方法，这应该适用于IE9之前：

...

consumeQueue: function () {

    if (this.queue > 0) {
        var item = this.queue.shift();
        console.log(item);
    }
    var that = this;
    setTimeout(function () {
        that.consumeQueue();
    }, 100);
},

...

在JavaScript中创建队列并在匿名函数中访问全局变量

4 个答案: