Note that there are some explanatory texts on larger screens.

plurals
  1. POJavaScript for loop with innerHTML not updating during loop execution
    text
    copied!<p>I'm looping through an array, and during each iteration of the loop, I'm calling a url through ajax. I'd like to also update an .innerHTML such that it displays to keep the user informed as to which iteration of the loop is being processed. However, .innerHTML only displays the update when the script completes. </p> <p>How can I make this notification display during my loop?</p> <p>I'm also using the query ajax setting 'async: false'. I don't want to hammer my server with processing all of the ajax requests at once, as they are encoding video files which is CPU intensive. I don't really want to lock the browser up waiting for synchronous requests to complete either.</p> <p>Is there a better way to do this?</p> <p>My ultimate goal is to sequentially execute my combine.php script for each set of videos, while displaying a current status indicator to the user, and while not locking the browser up in the process. Your help is appreciated!</p> <p>Code snippet here:</p> <p><code></p> <pre><code>// process the loop of videos to be combined var status = document.getElementById('currentStatus'); for (i=0; i&lt; count; i++) { // change the display var fields = videos[i].split(":", 2); current = i +1; currentStatus.innerHTML = "&lt;b&gt;Multi-part Videos:&lt;/b&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;h3 class='status'&gt;Currently Updating Bout #" + fields[1] + " (" + current + " of " + count + " videos)&lt;/h3&gt;"; // run the combine var dataString = 'videoId='+ fields[0]; $.ajax({ type: "POST", url: "combine.php", data: dataString, success: function(txt) { //deselect the checkbox document.combine.video[selected[i]].checked = false; }, async: false }); </code></pre> <p></code></p>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload