Question

while (counterInc < counter) {
  window.setTimeout(function () {
    $('#results').text(counterInc);
    }, 3000);
  counterInc++;
}

This code should increment the tag with ID results every 3000 milliseconds instead the while loop is running and returning the final result. For example instead of changing the text to 1, 2, 3, 4, 5,..n, it is changing the text to n. How would one have the loop update the text field every 1000 milliseconds with each increment instead of only the final result?

Answer 1

Try this

var counterInc = 0;
var counterMax = 10;

var timeoutId = window.setInterval(function() {
    $('#results').text(counterInc++);
    if (counterInc >= counterMax) {
        window.clearInterval(timeoutId);
    }
}, 500);​

http://jsfiddle.net/GufCs/4/

What was happening was you timeout updated the cell every three seconds, however, your loop can run through a ridiculous amount of numbers in 3 seconds, so it’s long since complete by the time the function in setTimeout had run.

This will trigger the function every 500ms (change to 3000ms for your purposes) and only then will it increment the counterInc. Add it clears the Interval when it reaches counterMax.