setInterval 和 setTimeout

這兩個函數都是定時器，都是window對象的函數，可是仍是有不少區別的。

1.根本區別

setTimeout("function", time)，function爲函數名或代碼，time單位毫秒，指在載入後延遲指定時間去執行函數一次。

setInteval("function", interval)，指在載入後每隔指定時間執行一次。

2.setTimeout循環調用

setTimeout 能夠經過寫在函數中，而後function指定爲這個外部函數，來達到循環延遲執行的效果，相似setInterval。

function movePic(nowid, nextid, direction){
    now = document.getElementById(nowid+"");            
    next = document.getElementById(nextid+"");
    //爲防止頻繁快速調用（如鼠標很快的移動）形成的拉扯，因此每次都將積累在setTimeout隊列中的事件清除；
    if(pic.movement){
        clearTimeout(pic.movement);
    }                
    var nowleft = parseInt(now.style.left);
    var nextleft = parseInt(next.style.left);
    var dist = 0;
    if(direction){
        var nowtoleft = -800;
    }
    else{
        var nowtoleft = 800;
    }
    if(nowleft == nowtoleft){return true;                 //相等時返回函數，中止循環調用
    }
    else if(nowleft > nowtoleft){
        dist = Math.ceil((nowleft - nowtoleft)/20);//變速運動
        nowleft -= dist;
        nextleft -= dist;
    }
    else{
        dist = Math.ceil((nowtoleft - nowleft)/20);//變速運動
        nowleft += dist;
        nextleft += dist;
    }
    now.style.left = nowleft+'px';
    next.style.left = nextleft+'px';
    var repeat = "movePic('"+nowid+"','"+nextid+"',"+direction+")";    
    //movement設置成全局變量會形成上面開始那裏「沒有設置就清除」的錯誤；若設置成局部變量，
    //則局部變量在clearTimeout函數的上下文裏不存在，使其不能正常工做；
    //因此設置成一個變量的屬性；        
    pic.movement = this.setTimeout(repeat, 1);
}

這有幾個特色：

能夠經過邏輯來指定什麼時候中止循環，經過return方式；

setInterval每隔固定時間就調用，無論前面的有沒有完成，而這種setTimeout的方式能夠保證是在前面函數執行完畢後再計時延遲調用的。

3.clearTimeout 和 clearInterval

clearInterval 能夠使定時循環中止，而clearTimeout通常是如上面註釋那樣，清除積累隊列，避免拉扯。

爲了能夠清除，要把定時函數賦給一個變量，而這個變量也是有所不一樣的：

setInterval能夠直接賦給一個全局變量，不會有問題；

在經過嵌套循環的方式用setTimeout時就要注意了，這個變量設置成全局變量會形成上面開始那裏「沒有設置就清除」的錯誤；若設置成局部變量，則局部變量在clearTimeout函數的上下文裏不存在，使其不能正常工做；因此，通常將它做爲被操做對象的屬性，最開始清除時，屬性存在才清除。