一、setTimeout 和setInterval

setTimeout( func, delay) 設(shè)置一個(gè)定時(shí)器，在指定的delay時(shí)間后執(zhí)行函數(shù)或者計(jì)算表達(dá)式。
setTimeout和setInterval的返回值都是一個(gè)正整數(shù)，表示定時(shí)器的編號，這個(gè)值可以傳給clearTimeout和clearInterval來取消這個(gè)定時(shí)器。有趣的是它們還公用一個(gè)編號池，也就是說我可以用clearTimeout來取消setInterval的重復(fù)執(zhí)行，但是為了避免混淆，最好不要重復(fù)執(zhí)行。

二、setTimeout與javascript 單線程

大家都知道JavaScript是單線程的，javascript引擎是單線程處理它的任務(wù)隊(duì)列，你可以理解成就是普通函數(shù)和回調(diào)函數(shù)構(gòu)成的隊(duì)列。當(dāng)異步事件發(fā)生時(shí)，如mouse click, a timer firing, or an XMLHttpRequest completing（鼠標(biāo)點(diǎn)擊事件發(fā)生、定時(shí)器觸發(fā)事件發(fā)生、XMLHttpRequest完成回調(diào)觸發(fā)等），將他們放入執(zhí)行隊(duì)列，等待當(dāng)前代碼執(zhí)行完成。如果一段程序執(zhí)行時(shí)間很長，就會(huì)發(fā)生阻塞，頁面可能會(huì)卡住。
但是我們來看看下面這段代碼，控制臺(tái)運(yùn)行后的結(jié)果

console.log(1);
setTimeout(function(){
  console.log(2)
},1000)
console.log(3)

打印出來的結(jié)果是 1 3 2。解決并不難理解，setTimeout里的內(nèi)容延時(shí)1秒后執(zhí)行了，當(dāng)然最后打出2
但如果是下面這段呢：

console.log(1);
setTimeout(function(){
  console.log(2)
},0)
console.log(3)

延時(shí)0秒執(zhí)行，最后打印出來的結(jié)果還是1 3 2。雖然是延時(shí)0毫秒，但仍然setTimeout中的內(nèi)容加入到了任務(wù)隊(duì)列的末尾，這是不是意味著我們可以用setTimeout來實(shí)現(xiàn)異步操作呢。setTimeout可以改變代碼的執(zhí)行順序

三、setTimeout與JavaScript性能優(yōu)化

有時(shí)候我們可能會(huì)遇到這要的需求：當(dāng)頁面滾動(dòng)到某一位置時(shí)展示一個(gè)元素或者執(zhí)行某個(gè)操作。大家會(huì)很容易的想到在只要window上綁定onscroll事件就行了，像這樣：

$(window).on('scroll',function(){
    if($(window).scrollTop()>550){
        console.log('show')
        $('.hide').show()
    }else{
        $('.hide').hide()
    }
})

but，在鼠標(biāo)滾動(dòng)的過程中，scroll事件會(huì)被持續(xù)觸發(fā)，也就意味這只要滿足if條件，里面的代碼會(huì)被執(zhí)行多次。

1.png

如上圖，在控制臺(tái)執(zhí)行$(window).on('scroll',function(){ console.log(1) })代碼。滾動(dòng)鼠標(biāo)短短時(shí)間就打印出一百多個(gè)1，如果在滾動(dòng)事件中代碼更長更復(fù)雜不知道瀏覽器會(huì)不會(huì)被卡死。
咱們來把上面的代碼改改：

var clock
$(window).on('scroll',function(){
    if(clock){
        clearTimeout(clock)
    }
    clock = setTimeout(function(){
        if($(window).scrollTop()>550){
        console.log('show')
        $('.hide').show()
    }else{
        $('.hide').hide()
    }
    },100)
})

與onscroll類似的事件還有移動(dòng)端屏幕旋轉(zhuǎn)onorientationchange、tuochmove事件等