Creating a queue in JavaScript and access global variables in an anonymous function

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?

Classic timeout has different context (this) issue

Paul S.
– Paul S.

2014-09-11 22:05:39 +00:00
Commented Sep 11, 2014 at 22:05 — Paul S.
– Paul S., Commented Sep 11, 2014 at 22:05

Amberlamps · Accepted Answer · 2014-09-11 22:07:17Z

4

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

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

Fiddle

edited Sep 11, 2014 at 22:07

Amberlamps

40.7k6 gold badges46 silver badges54 bronze badges

answered Sep 11, 2014 at 22:04

RienNeVaPlu͢s

7,7026 gold badges46 silver badges79 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

cookie monster Over a year ago

setTimeout(this.consumeQueue.bind(this), 100)

Deep · Accepted Answer · 2014-09-11 22:23:50Z

4

why bind, why argument?

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

edited Sep 11, 2014 at 22:23

answered Sep 11, 2014 at 22:10

Deep

2,5442 gold badges17 silver badges27 bronze badges

4 Comments

RienNeVaPlu͢s Over a year ago

Why downvote? Yes, it should be Foo.bar instead of just Foo. But it is an working alternative (+1)

Deep Over a year ago

Aaaaa.. yes! i not attentive. But what profit for using call or arguments?

a-d Over a year ago

@Deep By using bind or arguments you don't create a closure, that's the only point I can see but your answer deserves an upvote to me.

Deep Over a year ago

stackoverflow.com/questions/25797613/…

Community · Accepted Answer · 2017-05-23 12:29:29Z

2

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.

edited May 23, 2017 at 12:29

CommunityBot

11 silver badge

answered Sep 11, 2014 at 22:09

a-d

10.9k2 gold badges34 silver badges50 bronze badges

1 Comment

Deep Over a year ago

Maybe. And I'm thinking so TS have only one instance of queue. And more im think so call and arguments create recursive pointers. And this maybe make memleak on IE. in this I am not sure it is necessary to know

Jessie A. Morris · Accepted Answer · 2014-09-11 22:32:03Z

1

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);
},

...

answered Sep 11, 2014 at 22:32

Jessie A. Morris

2,31721 silver badges23 bronze badges

Collectives™ on Stack Overflow

Creating a queue in JavaScript and access global variables in an anonymous function

4 Answers 4

1 Comment

4 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

4 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related