企業網站制作的(de)js單線程為(wèi)什麽會有'異步'問題

看完前面的(de)鋪墊你是否會産生這些疑問，JS是單線程的(de)，那麽他是如(rú)何是實現異步操作的(de)？AJAX異步發送和(hé)回調請求，還有setTimeout也看起來像是多線程的(de)？不急慢慢來.

    js是同步的(de)？

是的(de)，單線程，那肯定隻能同步(排隊)執行咯

    js為(wèi)什麽需要異步?

如(rú)果JS中不存在異步,隻能自(zì)上而下執行,萬一(yī)上一(yī)行解析時間很長(cháng),那麽下面的(de)代碼就會被阻塞。
對于用戶而言,阻塞就意味着"卡死",這樣就導緻了很差的(de)用戶體驗

    js單線程又是如(rú)何實現異步的(de)呢(ne)?

通過  事件循環(event loop)  實現'異步'

經典問題：

     console.log('1')
    setTimeout(function(){
     console.log('2')
    },0)
    console.log('3') 
    //       1，3，2

也就是說,setTimeout裏的(de)函數并沒有立即執行,而是延遲了一(yī)段時間,滿足一(yī)定條件後,才去(qù)執行的(de),這類代碼,我們叫異步代碼。

所以,這裏我們首先知道(dào)了JS裏的(de)一(yī)種分類方式,就是将任務分為(wèi): 同步任務和(hé)異步任務

也就是說,setTimeout裏的(de)函數并沒有立即執行,而是延遲了一(yī)段時間,滿足一(yī)定條件後,才去(qù)執行的(de),這類代碼,我們叫異步代碼。

所以,這裏我們首先知道(dào)了JS裏的(de)一(yī)種分類方式,就是将任務分為(wèi): 同步任務和(hé)異步任務

雖然JS是單線程的(de)但是浏覽器的(de)內(nèi)核是多線程的(de)，在浏覽器的(de)內(nèi)核中不同的(de)異步操作由不同的(de)浏覽器內(nèi)核模塊調度執行，異步操作會将相關回調添加到任務隊列中。而不同的(de)異步操作添加到任務隊列的(de)時機也不同，如(rú) onclick, setTimeout, ajax 處理(lǐ)的(de)方式都不同，這些異步操作是由浏覽器內(nèi)核的(de) webcore 來執行的(de)，webcore 包含上圖中的(de)3種 webAPI，分别是 DOM Binding、network、timer模塊。

按照這種分類方式:JS的(de)執行機制是

    首先判斷js代碼是同步還是異步,同步就進入主進程,異步就進入event table
    異步任務在event table中注冊函數,當滿足觸發條件後,被推入event queue
    同步任務進入主線程後一(yī)直執行,直到主線程空閑時,才會去(qù)event queue中查看是否有可(kě)執行的(de)異步任務,如(rú)果有就推入主進程中

總結：同步可(kě)以保證順序一(yī)緻，但是容易導緻阻塞；異步可(kě)以解決阻塞問題，但是會改變順序性，根據不同的(de)需要去(qù)寫你的(de)代碼，

公司網站建設中JS異步編程的(de)四種方法

回調函數，這是異步編程最基本的(de)方法

假定有兩個函數f1和(hé)f2，後者等待前者的(de)執行結果，如(rú)果f1是一(yī)個很耗時的(de)任務，可(kě)以考慮改寫f1，把f2寫成f1的(de)回調函數。

    function f1(callback){
    
    　　setTimeout(function () {
    
    　　    // f1的(de)任務代碼
    
    　　　　callback();
    
    　　}, 1000);
    }

        采用這種方式，我們把同步操作變成了異步操作，f1不會堵塞程序運行，相當于先執行程序的(de)主要邏輯，将耗時的(de)操作推遲執行。

        回調函數的(de)優點是簡單、容易理(lǐ)解和(hé)部署，缺點是不利于代碼的(de)閱讀和(hé)維護，各個部分之間高(gāo)度耦合（Coupling），流程會很混亂，而且每個任務隻能指定一(yī)個回調函數。

 
二、事件監聽

另一(yī)種思路是采用事件驅動模式。任務的(de)執行不取決于代碼的(de)順序，而取決于某個事件是否發生。

    f1.on('done', f2); 當f1發生done事件，就執行f2。
    
    function f1(){
    
    　　setTimeout(function () {
    
    　　　　// f1的(de)任務代碼
    　　　　f1.trigger('done');
    
    　　}, 1000);
    
    }

           f1.trigger('done')表示，執行完成後，立即觸發done事件，從而開始執行f2。

       這種方法的(de)優點是比較容易理(lǐ)解，可(kě)以綁定多個事件，每個事件可(kě)以指定多個回調函數，而且可(kě)以"去(qù)耦合"（Decoupling），有利于實現模塊化。缺點是整個程序都要變成事件驅動型，運行流程會變得很不清晰。

 
三、發布/訂閱

我們假定，存在一(yī)個"信号中心"，某個任務執行完成，就向信号中心"發布"（publish）一(yī)個信号，其他任務可(kě)以向信号中心"訂閱"（subscribe）這個信号，從而知道(dào)什麽時候自(zì)己可(kě)以開始執行。這就叫做(zuò)"發布/訂閱模式"（publish-subscribe pattern），又稱"觀察者模式"（observer pattern）。我們可(kě)以通過查看"消息中心"，了解存在多少信号、每個信号有多少訂閱者，從而監控程序的(de)運行。　

    jQuery.subscribe("done", f2); //首先，f2向"信号中心"jQuery訂閱"done"信号。
    
    function f1(){
    
    　　setTimeout(function () {
    
    　　　　// f1的(de)任務代碼
    
    　　　　jQuery.publish("done"); //f1執行完成後，向"信号中心"jQuery發布"done"信号，引發f2的(de)執行。
    
    　　}, 1000);
    
    　　}
    
    jQuery.unsubscribe("done", f2); //f2完成執行後，也可(kě)以取消訂閱（unsubscribe）。

 
四、Promises對象

Promises對象是CommonJS工作組提出的(de)一(yī)種規範，目的(de)是為(wèi)異步編程提供統一(yī)接口。簡單說，它的(de)思想是，每一(yī)個異步任務返回一(yī)個Promise對象，該對象有一(yī)個then方法，允許指定回調函數。

    f1().then(f2);
    
    function f1(){
    
    　　var dfd = $.Deferred();
    
    　　setTimeout(function () {
    
    　　　　// f1的(de)任務代碼
    
    　　　　dfd.resolve();
    
    　　}, 500);
    
    　　return dfd.promise;
    
    }

回調函數變成了鏈式寫法，程序的(de)流程可(kě)以看得很清楚，而且有一(yī)整套的(de)配套方法，可(kě)以實現許多強大的(de)功能。

    f1().then(f2).then(f3); //指定多個回調函數
    f1().then(f2).fail(f3); //指定發生錯誤時的(de)回調函數

如(rú)果一(yī)個任務已經完成，再添加回調函數，該回調函數會立即執行。所以，你不用擔心是否錯過了某個事件或信号。這種方法的(de)缺點就是編寫和(hé)理(lǐ)解，都相對比較難。

js的(de)回調函數的(de)例子(zǐ)；
1，
<script type="text/javascript">
        //js的(de)回調函數，
        //定義一(yī)個方法，方法內(nèi)寫回掉函數的(de)執行代碼
        function mSum (a,b,callback) {
            callback(a+b);
        }
        //調用這個方法，并且獲取經過計算得到的(de)值
        mSum(1,2,function(sum) {
            alert(sum);
        });
    </script>

2，
/**callback回調函數的(de)使用*/

function fun1(callback){
alert('執行會點函數前操作');//執行這裏第二步
if(typeof(callback)=='function'){
callback();
}
}

$(function(){
alert(1);//先執行這裏第一(yī)步
fun1(function(){
alert('執行回調函數主題內(nèi)容吧(ba)');//最後執行這裏
})
})

/**callback回調函數的(de)使用*/

責任編輯：中山網站建設
 【網訊網絡】國(guó)家高(gāo)新技術企業》十年(nián)專注軟件開發，網站建設，網頁設計，APP開發，小程序，微信公衆号開發，定制各類企業管理(lǐ)軟件（OA、CRM、ERP、訂單管理(lǐ)系統、進銷存管理(lǐ)軟件等)！
服務熱線：0760-88610046、13924923903，http://www.wansion.net