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

Question

I'm not well versed in JavaScript. I have an object below (Foo.bar) that I want to both feed and print items from a queue every 100 ms.

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();

Within the consumeQueue function "this.queue" never updates. It always is empty.

Can anyone help me out here with what I am doing wrong?

Answer 1

You need to bind the scope to your timeout functions, otherwise this has a different context.

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

Fiddle

Answer 2

why bind, why argument?

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

Answer 3

In your callback function this is equal to window because this is omitted when calling the callback.

As RienNeVaPlus said in his answer you can use bind like this

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

OR you can pass this as a parameter to your callack function

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

In both case if you use IE as a browser, you will need IE9 at least.

Answer 4

As a final alternative to binding or passing it to the callback function, this should work pre IE9:

...

consumeQueue: function () {

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

...