淺談js中多并發的一些處理方法

用戶操作。
要實現這個場景容易碰到的一個問題就是多并發怎么控制？下面是一些解決方法和思路：

并行改為串行

如果業務邏輯本身是串行的，但是提供的請求方式又是異步的，可以考慮此方法。
但本場景顯然不是這種情況，這樣做大大降低了頁面性能，延長了加載速度。

回調

只適合并發數少的情況，多層嵌套回調會讓代碼的可讀性大大降低

function async1(){
    //do sth...
}
function async2(){
    //do sth...
    async1();
}
async2();

ajax改為同步

如在jquery中將async參數設置為false

$.ajax({
    url:"/jquery/test1.txt",
    async:false
});

設置結束標識

簡單一點的可以設置計數器，每完成一個異步函數加1，或者設置一個數組，每執行完一個異步函數更新數組。

回調計數

var cnt = 0;
function async1(){
    //do sth...
    callback();
}
function async2(){
    //do sth...
    callback();
}
function callback(){
    cnt++;
    if(2==cnt) console.log('都已執行完畢');
}

循環阻塞

var cnt = 0;
function async1(){
    //do sth...
    cnt++;
}
function async2(){
    //do sth...
    cnt++;
}
while(2>cnt){}

循環非阻塞

不建議過多使用，以免影響性能

var cnt = 0;

function async1(){
    //do sth...
    cnt++;
}
function async2(){
    //do sth...
    cnt++;
}
var interval = setInterval(function(){
    if(2===cnt){
        console.log('已執行完成');
        clearInterval(interval)
    }
}, 0);

第三方框架實現

jquery

目前我在項目中采用的方式

var d1 = $.Deferred();
var d2 = $.Deferred();

function async1(){
    d1.resolve( "Fish" );
}

function async2(){
    d2.resolve( "Pizza" );
}

$.when( d1, d2 ).done(function ( v1, v2 ) {
    console.log( v1 + v2 + '已完成');
});

angular

具體代碼不寫了，可以參考API文檔中關于$watch的說明。

來自：http://yalishizhude.github.io/2015/08/18/js-async/