(js) Firebug debug causing code to work

Question

Please excuse the awkward title I'll try my best to explain my peculiar problem.

I have three bits of javascript code:

Some self executing code which calls my personal Ajax function and passes it a callback.
The ajax function itself which retrieves the data calls the callback passing it the data.
The callback itself which takes in the data and parses it into an array of n length.

What should be noted is that the self executing code and the callback function are defined within their own closure. The ajax function is accessed through an imported named closure which I defined as $.

I am fairly new to JavaScript and I am still learning about closures and their scopes. I have reason to believe that this problem is probably related to that.

Anyway, my problem relates to trying to access that supposedly populated array. Since I defined the array in a suitable scope (or so I believe) as the parse function I think I should have no problem pushing items into it.

This is self exectuting :

(function ($){

    //Load stock
var items = [];
var response = $.Ajax("scripts/Lookup.php","GET",parse);

function parse(a){
    for(/*Simplified view*/){
        var item = new $.Item();
        item.name = domStuff.textContent;
        item.description = domStuff.textContent;
        item.price = domStuff.textContent;
        item.id = domStuff.textContent;

        items.push(item);
    }
}

    //Test the length (and verify contents)
    for(var i=0; i < items.length; i++){
        alert(items[i].price);
    }
}($));

This is my definitions, which includes the Ajax function:

var $ = (function(){
var s = {};

    var ajax = function(url,method,callback){
        var a = new XMLHttpRequest();
        a.open(method, url, true);
        a.onreadystatechange = function(){
        if(this.readyState==4){
                callback(a);
            }
    }
    a.send();
    };

    s.Ajax = (function(){
        return ajax;
    }());

return s;
}());

So what justifies the title is that when I probe the code with firebug, I can see that items is populated with 3 Objects correctly defined by the parsed data.

The loop then alerts as intended 3 times.

However, if I remove the break points and have firebug ignore the code then the loop doesn't play out and I can only assume that the array is empty.

The code works also if I alert(items) prior to the test loop.

If looks like code synchronous issue. The only variable that happens when you use Firebug of Alert is a delay. It seems that delay gives breathing time for some of your code to complete. ( I have not completely analyzed your code, but this is the first thing that came to me). — billygoat
– billygoat, Commented Apr 20, 2011 at 17:03

Rudu · Accepted Answer · 2011-04-20 17:01:29Z

2

AJAX is filling items asynchronously, meaning in your closure, on first execution items.length will be zero (from the original array initialization). Over time, AJAX through calls to your parse method will fill this array.

Because you're keeping items in a closure, you won't actually be able to access it from outside - which is a good practice, but can cause problems with debugging! Instead of items.push(item) try alert(item) (any browser, but execution blocking) or console.log(item) (firebug only) to see that you are, indeed, getting the results back from AJAX just not in initial execution.

answered Apr 20, 2011 at 17:01

Rudu

15.9k4 gold badges51 silver badges66 bronze badges

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

2 Comments

geoffrobinson Over a year ago

This is what I was trying to say as well in my answer. Your code needs to wait for the asynchronous code to finish.

Aaron Over a year ago

Thanks, the problem was regarding the asynchronicity.

geoffrobinson · Accepted Answer · 2011-04-20 17:04:24Z

1

I'm not a JavaScript expert by any means. However, I have run into situations on other programming languages where debugging has solved an issue.

In those cases, debugging has slowed the code down enough for it to work. Some process A needs asynchronous process B to return an object or do something before executing beyond a certain point. What is most likely happening in these types of scenarios is that the main thread is continuing or not waiting for the object to be populated by the other routine.

I hope that helps.

answered Apr 20, 2011 at 17:04

geoffrobinson

1,6003 gold badges16 silver badges23 bronze badges

Comments

Paul Perigny · Accepted Answer · 2011-04-20 17:10:29Z

1

Your parse function is called asynchronously. You need to wait for the parse function to be called before testing it.

Either test the result in you parse function or have another function as the callback for ajax call. This function calls parse and then test the results.

answered Apr 20, 2011 at 17:10

Paul Perigny

9735 silver badges12 bronze badges

Collectives™ on Stack Overflow

(js) Firebug debug causing code to work

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related