Question

I’m trying to come up with something to simulate an old school modem connection. I.E. text that paints itself at variable speeds rather than rendering at once.

Here’s something that I’ve come up with that works:

http://jsfiddle.net/vUPK2/

The problem I have is that I can’t get it to go any faster. I’ve got my setInterval set to 1ms, which seems to be as fast as I can get.

Does anybody have any idea how to re-factor this to remove the speed cap I’m experiencing?

Answer 1

Don’t use jQuery when it comes to milliseconds-speed, and at least cache the references. To make the animation faster than the minimum timeout, you can only append more than one character a time. Especially if you want a similiar speed cross devices, you should use a longer timeout because the minimum value can vary – a standard animation speed is 60 frames per second.

function displayText(id, text) {
    var node = document.createTextNode(""),
        i = 0,
        chars = 5;
    document.getElementById(id).appendChild(node);

    (function add(){
        node.data += text.substr(i, chars);
        i += chars;
        if (i < text.length)
            setTimeout(add, 1000/60);
    })();
}

Demo at jsfiddle.net