Javascript function with async callback doesn't change dom inside loop

Question

I have a function which needs to be run 197 times.I used a simple for loop to iterate it.

for(var m=0;m<198;++m) {
     console.log($('#riddle').attr('index')+" "+$('#riddle').attr('word'));
     submitN();     
}

For each iteration this should print the Index and Word attribute of Id=riddle and then execute the submitN function which changes the Index and Word attribute.

However The function executes only once.

This is what I get-

If I execute the submitN seperately function without loop for 197 times , it works fine

Pressing the key 197 times is a very inefficient, I would like some help to make it run with the loop.

EDIT

submitN function

function submitN() {
    var i_val = $('#riddle').attr('next');
    req_n = sendData(JSON.stringify({'i':i_val}),'/clue');
    req_n.done(munchClues);
    req_n.fail(clueFail);
}

Look at your first screenshot. See the blue "198" next to "0 right"? That's the console saying "this thing was printed 198 times in a row, but I didn't want to bother you with all of them". — Paul Roub, Oct 04 '15 at 17:49
Most likely your `submitN` does some async code. As already noted the `198` beside the log entry shows you that it printed `198` times. — t.niese, Oct 04 '15 at 17:50
But it's value should change each time , as showed in the 2nd screenshot. — Golden_flash, Oct 04 '15 at 17:51
Then we'd need to see `submitN()`. Currently the question is "why doesn't this loop execute more than once", but it does. — Paul Roub, Oct 04 '15 at 17:52
And `sendData` Is it a async api call? If so you loop is continuing regardless. — ste2425, Oct 04 '15 at 17:56
Because you use `done` and `fail` indicates that you use the Promise functionality of jQuery (e.g. of `$.getJSON`, `$.ajax`, `$.get`, ...), or something similar. And I assume that in `munchClues` the `$('#riddle')` will be changed. The problem with that is that this will be done async, so every `munchClues` call will happen **after** the main loop finished. — t.niese, Oct 04 '15 at 17:57
Yes it is Async, it uses ajax.Is there a way to try what I am doing in Async api call. — Golden_flash, Oct 04 '15 at 17:59
Async means that it executes "in its own time," in this case separate from and ultimately after the loop. The values will not have had a chance to change between each `console.log()`. Whereas running the command directly in the console affords it that chance. If you want each iteration to "*wait*" until the previous has completed, you'll have to find a alternate iterator to the `for` loop: [Asynchronous for cycle in JavaScript](http://stackoverflow.com/questions/4288759/asynchronous-for-cycle-in-javascript) — Jonathan Lonowski, Oct 04 '15 at 18:03

score 2 · Accepted Answer · answered Oct 04 '15 at 18:26

To wait for the async call each time like @ste2425 and @t.niese said, you can wait to check the dom inside the sendData callback:

var m = 0;
function checkRiddle(){
  m++;
  console.log($('#riddle').attr('index')+" "+$('#riddle').attr('word'));
  submitN();  
}
checkRiddle();

function submitN() {
  var i_val = $('#riddle').attr('next');
  req_n = sendData(JSON.stringify({'i':i_val}),'/clue');
  req_n.done(function(params){
    munchClues(params);
    if(m<198){
      checkRiddle();
    }
  }); 
  req_n.fail(clueFail);
}

This assumes that munchClues is only using one param. Some testing may be required to successfully inject this code inside the done callback.

Javascript function with async callback doesn't change dom inside loop

1 Answers1