javascript如何阻塞程序運行

背景：

JavaScript 是單線程的，一段 Js 程序的運行會占滿整個程序進程，我們通常會想方設法的通過異步編程來減少程序的阻塞，但在某些特殊的場景下我們需要阻塞程序的運行，那么今天就反其道而行之，看看通過怎么樣正常的方式來阻塞 Js 運行。

方法一 :

無限循環

• 單線程的 JavaScript 可以給我們靈感，只要程序不斷的計算就可以阻塞程序的進程：
  

function sleep(d){  
    let t = Date.now();
    while(Date.now() - t <= d);  
}

function test() {
    console.log('sleep');
    sleep(10000);
    console.log('run');
}

test();

• 但是這種方式其實是通過無限占用計算機的資源來造成假死狀態，它會消耗大量的 CPU，并沒有真正的讓程序進程停止，這種方式不可取。

方法二 : 

setTimeout

• 我們直接用 setTimeout 回調的方式來阻斷程序的進程，當然它的確是沒有讓程序繼續進行并且讓 CPU 空閑下來，但是這種寫法并不是一種同步編程的方式：

function test() {
    console.log('sleep');
    setTimeout(function() {
        console.log('run');
    }, 10000)
}

await

• ES 的高級版本出現了 Promise、await 等異步編程，它們讓程序的寫法更佳的優雅簡介，同樣也要借助于 setTimeout 來解決，建議采用此方式：

function sleep(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
}

async function test() {
    console.log('sleep');
    await sleep(10000);
    console.log('run');
}

test();

方法三 : 

generator & yield

• ES6 的迭代器同樣也具備異步編程能力，但是這種寫法相當晦澀難懂，建議少用：

function sleep(time) {
    setTimeout(function () {
        test.next();
    }, time);
}

function* gen() {
    console.log('sleep');
    yield sleep(10000);
    console.log('10 second later');
}

let test = gen();
test.next();

總結

上述方法總結下來就是兩種，一種是強行阻斷式利用 Js 的單線程機制；另一種就是借助 Js 的異步事件機制+高級異步編程語法。當然我們在實際業務情況中使用阻塞 JS 進程的地方非常少，經常會通過 UI 來禁止用戶繼續操作，這樣的探索僅僅是搞清楚一些 Js 的基本原理，有助于我們很好的了解它。

以上就是javascript阻塞問題的詳細內容，更多請關注億速云其它相關文章！