你真會用setTimeout嗎?

jsyzchen 發布于2019-08-21 10:47 / 3210人閱讀

摘要：什么交互都處理不了怎么辦簡化復雜度復雜邏輯后端處理的多線程上面都是的做法，但是也是處理這種問題的一把好手。換一種思路，上面就是利用實現一種偽多線程的概念。

教科書里面的setTimeout

定義很簡單
setTimeout() 方法用于在指定的毫秒數后調用函數或計算表達式。

廣泛應用場景
定時器，輪播圖，動畫效果，自動滾動等等

上面一些應該是setTimeout在大家心中的樣子，因為我們平常使用也不是很多。

但是setTimeout真的有那么簡單嗎？

測試題

一個題目，如果你在一段代碼中發現下面內容

    var startTime = new Date();
    setTimeout(function () {
        console.log(new Date() - startTime);
    }, 100)

請問最后打印的是多少?
我覺得正確答案是，取決于后面同步執行的js需要占用多少時間。
MAX(同步執行的時間, 100)。

再加一個題目,只有下面代碼

    setTimeout(function () {
        func1();
    }, 0)
    func2();

func1和func2誰會先執行？

這個答案應該比較簡單，func2先執行，func1后面執行。

再來一題

    setTimeout(function () {
        func1（）
    }, 0)

和

    setTimeout(function () {
        func1（）
    })

有什么差別？

0秒延遲，此回調將會放到一個能立即執行的時段進行觸發。javascript代碼大體上是自頂向下的，但中間穿插著有關DOM渲染，事件回應等異步代碼，他們將組成一個隊列，零秒延遲將會實現插隊操作。
不寫第二個參數，瀏覽器自動配置時間，在IE，FireFox中，第一次配可能給個很大的數字，100ms上下，往后會縮小到最小時間間隔，Safari，chrome，opera則多為10ms上下。

上面答案來自《javascript框架設計》

好了，看了上面幾個題目是不是感覺setTimeout不是想象中那樣了。

setTimeout和單線程

下面是我自己的一些理解
首先需要注意javascript是單線程的，特點就是容易出現阻塞。如果一段程序處理時間很長，很容易導致整個頁面hold住。什么交互都處理不了怎么辦？

簡化復雜度？復雜邏輯后端處理？html5的多線程？

上面都是ok的做法，但是setTimeout也是處理這種問題的一把好手。

setTimeout一個很關鍵的用法就是分片，如果一段程序過大，我們可以拆分成若干細小的塊。
例如上面的情況，我們將那一段復雜的邏輯拆分處理，分片塞入隊列。這樣即使在復雜程序沒有處理完時，我們操作頁面，也是能得到即使響應的。其實就是將交互插入到了復雜程序中執行。

換一種思路，上面就是利用setTimeout實現一種偽多線程的概念。

有個函數庫Concurrent.Thread.js 就是實現js的多線程的。

一個簡單使用的例子，引入Concurrent.Thread.js后

    Concurrent.Thread.create(function(){
        for (var i = 0;i<1000000;i++) {
            console.log(i);
        };
    });
    $("#test").click(function  () {
        alert(1);
    });

雖然有個巨大的循環，但是這時不妨礙你去觸發alert();

是不是很厲害~

還有一種場景，當我們需要渲染一個很復雜的DOM時，例如table組件，復雜的構圖等等，假如整個過程需要3s,我們是等待完全處理完成在呈現，還是使用一個setTimeout分片,將內容一片一片的斷續呈現。

其實setTimeout給了我們很多優化交互的空間。

如何使用

setTimeout這么厲害，那么我們是需要在在項目中大量使用嗎？
我這邊的觀點是非常不建議，在我們業務中，基本上是禁止在業務邏輯中使用setTimeout的，因為我所看到的很多使用方式都是一些問題不好解決，setTimeout作為一個hack的方式。
例如，當一個實例還沒有初始化的前，我們就使用這個實例，錯誤的解決辦法是使用實例時加個setTimeout，確保實例先初始化。
為什么錯誤？這里其實就是使用hack的手段
第一是埋下了坑，打亂模塊的生命周期
第二是出現問題時，setTimeout其實是很難調試的。

我認為正確的使用方式是，看看生命周期（可參考《關于軟件的生命周期》），把實例化提到使用前執行。

綜上，setTimeout其實想用好還是很困難的，他更多的出現是在框架和類庫中，例如一些實現Promis的框架，就用上了setTimeout去實現異步。
所以假如你想去閱讀一些源碼，想去造一些輪子，setTimeout還是必不可少的工具。

微信公眾號

博客地址

http://tangguangyao.github.io/

GPU云服務器云服務器 setTimeout javascript settimeout 什么人會用堡壘機 js定時器setTimeout

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/86185.html

線程池你真不來了解一下嗎？

摘要：所以說我們的線程最好是交由線程池來管理，這樣可以減少對線程生命周期的管理，一定程度上提高性能。線程池不接收新任務，不處理已添加的任務，并且會中斷正在處理的任務。當所有的任務已終止，記錄的任務數量為，線程池會變為狀態。線程池徹底終止的狀態。前言只有光頭才能變強回顧前面： ThreadLocal就是這么簡單多線程三分鐘就可以入個門了！多線程基礎必要知識點！看了學習多線程事半功倍...

stdying 2019-08-15 15:51 評論0 收藏0
前端er，你真的會用 async 嗎？

摘要：異步函數是值通過事件循環異步執行的函數，它會通過一個隱式的返回其結果。 async 異步函數不完全使用攻略前言現在已經到 8012 年的尾聲了，前端各方面的技術發展也層出不窮，VueConf TO 2018 大會也發布了 Vue 3.0的計劃。而在我們（我）的日常中也經常用 Vue 來編寫一些項目。那么，就少不了 ES6 的登場了。那么話說回來，你真的會用 ES6 的 asyn...

Jaden 2019-08-23 13:50 評論0 收藏0
笑出腹肌！有些程序員真會玩代碼注釋

摘要：轉自網絡，部分出自網友這是一個被代碼耽誤的詩人來一份年的代碼看看產品經理要對此負責不敢看，也不敢問官網上的注釋程序員正確發牢騷的地方閱讀源碼的人，心里一定的崩潰的第一天上班看到這段注釋就想辭職。轉自網絡，部分出自 Quora 網友 0、這是一個被代碼耽誤的詩人 1、來一份 19...

tinyq 2021-10-12 10:12 評論0 收藏0
易探云：“夏日炎炎,有你真甜”活動,香港/韓國/美國/深圳云服務器優惠活動

易探云怎么樣?易探云8月份上線夏日炎炎，有你真甜活動，降價，降價，給云服務器降價降溫了!購買易探云服務器月付送QQ音樂豪華版綠鉆1月及云服務器年付送QQ音樂綠鉆豪華版1年，而且給云服務器四大驚喜，年付低至6折起!香港CN2(薦)可用區1核1G2M云服務器月付僅18元/月(首月優惠)，年付低至238元/年起;韓國cn2云服務器2核2G2M20G配置僅548元/年;美國bgp云服務器2核2G5M20G...

番茄西紅柿 2021-08-06 11:31 評論0 收藏2637
你真的會用 Babel 嗎?

摘要：安裝然后在的配置文件加入入口文件引入這樣就可以啦，還是可以減少很多代碼量的。是參數，等同于執行正常。這個包很簡單，就是引用了和，然后生產環境把它們編譯到目錄下，做了映射，供使用。引入這個問題是對自己的發問，但我相信會有很多跟我一樣的同學。對于 babel 的使用，近半年來一直停留在與 webpack 結合使用，以及在瀏覽器開發環境下。導致很多 babel 的包，我都不清楚他們是干嘛...

mochixuan 2019-08-22 11:06 評論0 收藏0