Question

I want to pause execution in javascript so that I can animate the appearance of text on the screen. My code is currently this:

function AnimateWord(word) {
    for (var i = 0; i <= word.length; i++) {
        myTest.textContent += word.charAt(i);
        // need to pause here and then continue
    }
}

I’ve done some research and the preferred method to do this in javascript seems to be setTimeout, although I can’t really see how that would work in this case without creating a recursive loop (which just doesn’t seem like the right solution to me).

Is there a way around this, or am I stuck with setTimeout and a recursive loop?

EDIT:

Based on some additional tests, I’ve tried using the Promise.timeout:

for (var i = 0; i <= word.length; i++) {
    WinJS.Promise.timeout(1000).then(TypeLetter(word.charAt(i)));
}

function TypeLetter(letter) {
    myTest.textContent += letter;
}

But this doesn’t seem to actually pause. In fact, it seems to completely ignore the timeout. I’ve also tried:

setTimeout(TypeLetter(word.charAt(i)), 1000);

With basically the same results. this page seems to imply that it should wait and then execute the task. I’m quite new to WinJS, but am equating a promise to an await keyword in C#.

Answer 1

var i = 0;
var str = "plz send teh codez";
var intervalId = setInterval(function(){
    myTest.textContent += str.charAt(i);
    if (++i >= str.length)
        clearInterval(intervalId);
}, 1000);

demo http://jsfiddle.net/qxfVu/1/