Caching values inside a Javascript function

Question

I have a simple Javascript method (member function of an object) which keeps an internal cache (to avoid unnecessary ajax requests.)

I must be confused about Javascript scope rules or something because updates to the cache don't seem to be visible if they're made from within a nested function.

For example:

window.mynamespace = window.mynamespace || { };
window.mynamespace.foo = function()
{
    this.cache = this.cache || { };

    alert(JSON.stringify(this.cache));

    this.cache["foo"] = "bar";
}

Here's a simple example that is meant to demonstrate that items inserted into the cache are being remembered across calls to mynamespace.foo().

In my onload or $(document).ready() handler, if I say:

window.mynamespace.foo();
window.mynamespace.foo();

I get two alerts, where the first shows me {} and the second shows me {"foo" : "bar"}. Okay great, that's exactly what I expected. So my cache seems to work.

But... if I try to update the cache from within a nested function (specifically within a callback handler of some async operation), the updates to my cache don't seem to propagate.

For example:

window.mynamespace = window.mynamespace || { };

window.mynamespace.foo = function()
{
    var instance = this;

    this.cache = this.cache || { };

    alert(JSON.stringify(this.cache));

    window.setTimeout(
        function()
        {
            instance.cache["foo"] = "bar";
        },
        0
    );
}

Here, I update the cache from within a nested function (a callback handler for window.setTimeout).

In this case, if I call window.mynamespace.foo() twice from within my document onload handler, I get two alerts, each showing me {} - an empty object. So now my cache is not updating.

Okay, so something about my understanding of Javascript scoping rules here is broken. I realize that this means something different from within a nested function, which is why I specifically use the instance variable which always refers to the window.mynamespace.foo object.

Please educate me about my error here.

setTimeout code runs in the future. So of course the second alert shows an empty object, because the cache has not been modified yet. — Oriol
– Oriol, Commented Jan 17, 2015 at 22:52

Vinay · Accepted Answer · 2015-01-17 23:09:45Z

2

A window.setTimeout with a 0ms wait time will clear the calling stack. What's happening is:

CLEARED CALL STACK STATE:

5) key gets set from first foo call setTimeout

6) key gets set from second foo call setTimeout

TOP FRAME OF CALL STACK:

1) foo gets called first

3) second foo call

FOO FRAME OF CALL STACK:

2) first call of foo instantiates cache and alerts empty object

4) second call of foo alerts empty object

Here is a jsfiddle that confirms this behavior:

http://jsfiddle.net/jhgeh4c5/1/

answered Jan 17, 2015 at 23:09

Vinay

6,3627 gold badges40 silver badges56 bronze badges

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

Comments

Oriol · Accepted Answer · 2015-01-17 23:18:42Z

Note this is not a problem of scoping or nested functions, because the following code works:

window.mynamespace = window.mynamespace || {
  cache: {},
  foo: function() {
    alert(JSON.stringify(this.cache));
    (function() {
      window.mynamespace.cache["foo"] = "bar";
    })();
  }
};
window.mynamespace.foo();
window.mynamespace.foo();

The problem is that setTimeout code runs in the future. So of course the second alert shows an empty object, because the cache has not been modified yet.

Therefore, if you really need to update the cache asynchronously, you can use callbacks:

window.mynamespace = window.mynamespace || {
  cache: {},
  foo: function(callback) {
    alert(JSON.stringify(this.cache));
    setTimeout(function() {
      window.mynamespace.cache["foo"] = "bar";
      if(typeof callback == 'function') callback();
    }, 0);
  }
};
window.mynamespace.foo(function(){
  window.mynamespace.foo();
})();

Collectives™ on Stack Overflow

Caching values inside a Javascript function

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related