定義和用法

setTimeout() 方法用于在指定的毫秒數(shù)后調(diào)用函數(shù)或計(jì)算表達(dá)式。

基本用法

下面的代碼將在"大約"2s后輸出s；為什么是大約呢？因?yàn)椴⒉荒鼙ＷC準(zhǔn)確的2s后執(zhí)行，因?yàn)閖s是單線程，setTimeout只是在2s后插入任務(wù)隊(duì)列。

//兩個(gè)參數(shù) 1.要執(zhí)行的函數(shù)表達(dá)式 2.延遲時(shí)長(單位毫秒)
setTimeout("console.log('s')",2000);

第一個(gè)參數(shù)為函數(shù)

例如下面

function a(s){
console.log(s);
}
setTimeout("a('dd')",1000);
//dd

注意：如果參數(shù)不是全局變量要傳遞參數(shù)時(shí)

function a(s){
console.log(s);
}
function b(){
var c="ss";
}
setTimeout(function(){a(c);},1000);

任務(wù)隊(duì)列

以下代碼會怎么執(zhí)行呢？

setTimeout("console.log('s')",0);
for(var i=0;i<100;i++){
console.log(i);
}

答案是先輸出0-99，然后輸出s。這就是為什么setTimeout不能保證按時(shí)執(zhí)行的原因，因?yàn)槠渌a執(zhí)行“優(yōu)先級”更高。

其他用法

一.

以下一段簡單的代碼，在線演示地址http://jsrun.net/7piKp/edit
html

<input type="" name="" onkeydown="set(event)">
<p id="show"></p>

script

function set(e) {
        var show = document.querySelector("#show");
        show.innerText = e.target.value;
}

結(jié)果

同步

function set(e) {
        var show = document.querySelector("#show");
        setTimeout(show.innerText = e.target.value, 0);
}

結(jié)果就和我們想的一樣了。當(dāng)然直接把onkeydown換成onkeyup就不需要使用setTimeout了。
二.
這次是在動畫中使用，當(dāng)我們做元素進(jìn)入動畫的時(shí)候
html

<div class="s"></div>
<button onclick="set()">添加動畫</button>

css

.s {
        width: 200px;
        height: 200px;
        background: red;
    }

js

function set() {
        var ele = document.querySelector(".s");
        ele.style.transition = "none";
        ele.style.transform = "translateX(200px)";
        ele.style.transition = "all 1s ease-in";
        ele.style.transform = "translateX(0)";
}

我們點(diǎn)擊按鈕后先后為div添加了兩個(gè)transform，我們期望的效果是div從200緩慢移動到0，但結(jié)果就是這兩個(gè)transform相互抵消了，這也是瀏覽器渲染優(yōu)化的一部分。
但是我就是想做這種動畫怎么辦？當(dāng)然可以，仿照上面，既然瀏覽器會把兩個(gè)transform抵消那我們就稍微“延后”一下，在線演示地址http://jsrun.net/FpiKp/edit

    function set() {
        var ele = document.querySelector(".s");
        ele.style.transition = "none";
        ele.style.transform = "translateX(200px)";
        //ele.offsetWidth;
        setTimeout(function() {
            ele.style.transition = "all 1s ease-in";
            ele.style.transform = "translateX(0)";
        }, 0);
    }

當(dāng)然不使用setTimeout也是可以的，使用ele.offsetWidth或者ele.offsetHeight來觸發(fā)重繪也是可以的。