setTimeout() in js Object

[Gonzalez]

In Javascript, setTimeout() is a method of window object for timing event. It is used to trigger a function or an expression after a specified number of milliseconds. It returns a numeric timeout ID that can be canceled with the clearTimeout() method.

Syntax

var t = setTimeout("javascript expression", milliseconds);
clearTimeout(t); //cancel the setTimeout() ID t 

Typical Use

Set a number of time of delay on Javascript expression.

var t = setTimeout("alert('Hello!')", 1000);

Set a number of time of delay on Javascript function. The setTimeout function is usually at the end of the statements within the function.

var t;
function movee() {
var elem = document.getElementById("box");
var spot = parseInt(elem.style.top);        
if (spot < 580) {    
    spot+=16;              
    elem.style.top=spot+"px"; 
}
t =  setTimeout(movee,100);  
}

document.getElementById('box').style.top='180px' //Reset     
clearTimeout(t); //clear the setTimeout ID

When the movee() function is triggered, the event is keeping running until the setTimeout ID is cleared by clearTimeout() method even though you reset the div box to its start position. To clear the setTimeout ID outsite the function, make sure the setTimeout ID a global scope variable.

A Wrong Use

The example below gives a common wrong use of setTimeout() method. The varible is a local variable while the expression alert(str) is an expression in global scope. Hence, it cannot see the local variable str.

function foo() {
  var str = "hello";
  setTimeout("alert(str);", 1000);
}

foo(); // returns str is undefined.

When setTimeout is used in the Javascript object, the meaning that the keyword this stands for will change in the method contaning setTimeout because the setTimeout() method will change the context to global scope. And this will stands for window object rather than object instance. So the example below uses a global property _this to keep it consistant.

function div(id) {
this.id = id;
this.t = 0; 
}

div.prototype = {
    _this : "",
    init: function() {
        _this =  this;
    },  

  move: function() {
     var elem = document.getElementById(_this.id);
     var spot = parseInt(elem.style.top);        
     if (spot < 1700) {    
         spot+=16;              
         elem.style.top=spot+"px"; 
     }
     _this.t =  setTimeout(_this.move,100);     
    }    
};

var m = new div("box1");
m.init();
m.move();

Object Bind method

The use of _this makes it possible div object can be referred in setTimeout. A more generic way of keep this keyword consistant is using extended Bind method. To distingush the similar bind method used for Function object. Here I use capital for the initial letter B. Bind method uses apply method to return a method / function with its this keyword consistant to the object invoking it.

div.prototype = { 
    move: function() {
        var closure = this.Bind(this.move);
        var elem = document.getElementById(this.id);
        var spot = parseInt(elem.style.top);        
        if (spot < 1600) {    
             spot+=16;              
             elem.style.top=spot+"px"; 
        }
        this.t =  setTimeout(closure,100);   
    },

    Bind: function( Method ){
        var _this = this; 
        return(
             function(){
                return( Method.apply( _this, arguments ) );
             }
        );
    }     
}

[Gonzalez]

Goooood!

-Gonzalez