Question

how can i pause a javascript execution until a flag becomes true?

For Example, i’ve a xml message like this:

[...]
<action>
    <resource update>id</resourceupdate>
</action>
<action>
    <event>id1</event>
</action>
<action>
    <event>id2</event>
</action>
<action>
    <event>id3</event>
</action>
[...]

I wish that the event nodes are processed only after processing node resourceupdate (which requires more time to be served, as it requires the loading of a page):

in javascript to process this message with an iterator (each) i’ve tried:

$(_response).find('ACTION').each(function() {       
if (tagName=="RESOURCEUPDATE") {
    ready = false;
    //load the resource with selected id in an iframe
} else if (tagName=="EVENT") {
    browserLoaded();   //the waiting function
    eventhandler();  //consume the event
}
});

the waiting function is:

function browserLoaded() {
if (!ready) {
    setTimeout(browserLoaded(),1000);
}
} 

and the ready var becomes true when the iframe is loaded:

$(iframe).load(function() {
    ready = true;
});

but when execute i’ll catch this error:

 Maximum call stack size exceeded error

any ideas?
thanks!

Answer 1

It’s really a bad idea to use some kind of a flag. You have to use Deferred Pattern. Something like this:

var resources = [];
$(_response).find('ACTION').each(function() {
  var deferred = resources.length > 0 ? resources[resources.length - 1] : null;

  switch (tagName) {
    case "RESOURCEUPDATE":
      deferred = $.Deferred();

      //load the resource with selected id in an iframe
      $(iframe).bind('load', function () {
        deferred.resolve(/*specific arg1, arg2, arg3, ...*/)
      });
      resources.push(deferred);
      break;
    case "EVENT":       
      if (deferred) {
         deferred.done(function (/*specific arg1, arg2, arg3, ...*/) {
            // process event node
         });
      }
      break;
  }
});

// clean up deferreds objects when all them will be processed
$.when.apply($, resources).then(function() {
  resources.length = 0;
})

P.S.: http://api.jquery.com/category/deferred-object/