Question

Consider the following function:

$("document").ready(function(){
    var echoText = 'Hello world!';
    echoText = echoText.split('');
    $.each(echoText, function(key, value){
        $("#content").append(value);
    });
});

This simply echoes the input text. What I want to do, though, is to add a delay between every character echoed, so it looks like a slow human typing. Any ideas how to proceed? I tried googling, but nothing helps so far.

Answer 1

Consider using the setTimeout() function:

$("document").ready(function(){
    var data = 'Hello world!';
    var lastIndex = 0;

    var fnEcho = function() {
        if (lastIndex < data.length) {
            $("#content").append(data[lastIndex]);
            lastIndex++;

            window.setTimeout(fnEcho, 1000);
        }
    }

    fnEcho();
});