Promise - javascript

javascript 是單線程的,所以如果promise里面的操作是耗時的話,一樣也會阻塞后面的代碼執行。

base case

"use strict";

function f1 (count) {
    return new Promise(function(resolve,reject){
        if(count <= 0) reject("reject! count <= 0 ");
        
        // block the thread
        for (var i = 0; i < count; i++) {
            for (var k = 0; k < count; k++) {
                // do nothing 
            }
        }
        let j = i;
        resolve(j);
    });
};

// 下面的代碼,第一個f1會阻塞第二個f1
f1(100000).then(function(result) {
    console.log(result);
});

f1(99).then(function(result) {
    console.log(result);
});

advanced case

下面的代碼
f1依然是個阻塞的promise
n1使用了setTimeout,不回阻塞promise返回
但是在900ms之后, 里面的方程被放到執行queue里執行
因為這是耗時的任務,然后n1就會阻塞后面的程序執行

在1000ms之后,n2的方程被放到執行queue里執行
這個并不耗時,但是n2被n1阻塞了

"use strict";

function f1 (count) {
    return new Promise(function(resolve,reject){
        if(count <= 0) reject("reject! count <= 0 ");
        
        // block the thread
        for (var i = 0; i < count; i++) {
            for (var k = 0; k < count; k++) {
                // do nothing 
            }
        }
        let j = i;
        resolve(j);
    });
};

function n1 (count){
    return new Promise(function(resolve,reject){
        if(count <= 0) reject("reject! count <= 0 ");
        
        
        setTimeout(function(){
            // not block current thread
            // but it will block after 800ms
            for (var i = 0; i < count; i++) {
                for (var k = 0; k < count; k++) {
                    // do nothing 
                    
                }
            } 
            
            console.log("n1 completed");
        }, 800);
        
        resolve("n1 rsolve");
    });
};


function n2 (count){
    return new Promise(function(resolve,reject){
        if(count <= 0) reject("reject! count <= 0 ");
        
        var outer2 = "n2 completed";
        
        setTimeout(function(){
            // not block thread
            // but it will be blocked by n1 因為n1先到被從執行隊列里取出來
            for (var i = 0; i < count; i++) {
                for (var k = 0; k < count; k++) {
                    // do nothing 
                    
                }
            } 
            
            console.log(outer2);
        }, 1000);
        
        resolve("n2 resolve");
    });
};


// 不會block f1
n1(100000).then(function(result) {
    console.log(result);
});

// 不回block f1, 但是里面的timeout代碼會被n1 block
n2(1000).then(function(result) {
    console.log(result);
});


f1(1000).then(function(result) {
    console.log(result);
});


f1(9).then(function(result) {
    console.log(result);
});
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容