SetTimeout in IE

Today, I rewrite the home page of the my site www.steakovercooked.com using mainly Javascript. The idea is to use the object defined in [here], printing the messages and major links line by line, in a *nix way. The usage of Console object is pretty simple: Initialize it with the DOM element and Print it. In order to evalulate a sleep function, which is not existent in Javascript, there are a couple of implementations, some of them are bad. For example, using a loop to compare the time will be the straightforward solution but this tends to freeze the browsers (using CPU resources) in most cases.

1
2
3
4
5

function sleep(milliSeconds)
{
    var startTime = new Date().getTime(); // get the current time
    while (new Date().getTime() < startTime + milliSeconds); // hog cpu
}

function sleep(milliSeconds)
{
    var startTime = new Date().getTime(); // get the current time
    while (new Date().getTime() < startTime + milliSeconds); // hog cpu
}

The setTimeout and setInterval can be used to emulate the sleep function. They are used to invoke a function at some interval. The difference between setTimeout and setInterval is the setTimeout invokes the function only once after some time elapses while setInterval will repeatly call that function over and over again until it is canceled by clearInterval.

1
2

var obj = setInterval(function test(){alert('test');}, 1000);
clearInterval(obj);

var obj = setInterval(function test(){alert('test');}, 1000);
clearInterval(obj);

Using setTimeout can accomplish something similar.

1
2
3
4
5
6
7
8
9

function test(x)
{
    if (x < 10)
    {
        alert(x);
        setTimeout(test, 1000, x + 1);
    }
}
test(0);

function test(x)
{
    if (x < 10)
    {
        alert(x);
        setTimeout(test, 1000, x + 1);
    }
}
test(0);

The third parameter of setTimeout is the paramters to pass to the functions, however, this is not supported in Internet Explorer. For Firefox, Chrome, Opera etc this is OK. In order for the script to work in IE, you can change the variable to global but this becomes messy.

1
2
3
4
5
6
7
8
9
10

var x = 0;
function test()
{
    if (x < 10)
    {
        alert(x++);
        setTimeout(test, 1000);
    }
}
test();

var x = 0;
function test()
{
    if (x < 10)
    {
        alert(x++);
        setTimeout(test, 1000);
    }
}
test();

The printing procedure sleeps a interval and prints each message one by one in the array.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

Console.Initialize("console");
Console.Clear();
var msg = ['message1', 'message2', 'message3'];
var interval = 180,
    idx = 0;
 
function print(a) 
{
    if (a.length > 0) 
    {
        Console.PrintLn(a);
    }
}
 
function loopmsg() 
{
    if (idx < msg.length) 
    {
        print(msg[idx++]);
        setTimeout(loopmsg, interval);
    }
}
loopmsg(0);

Console.Initialize("console");
Console.Clear();
var msg = ['message1', 'message2', 'message3'];
var interval = 180,
    idx = 0;

function print(a) 
{
    if (a.length > 0) 
    {
        Console.PrintLn(a);
    }
}

function loopmsg() 
{
    if (idx < msg.length) 
    {
        print(msg[idx++]);
        setTimeout(loopmsg, interval);
    }
}
loopmsg(0);

This can be extended to some nice effects as a type-writers.

–EOF (The Ultimate Computing & Technology Blog) —