javascript如何阻塞程序運(yùn)行

背景：

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

方法一 :

無限循環(huán)

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

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

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

test();

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

方法二 : 

setTimeout

• 我們直接用 setTimeout 回調(diào)的方式來阻斷程序的進(jìn)程，當(dāng)然它的確是沒有讓程序繼續(xù)進(jìn)行并且讓 CPU 空閑下來，但是這種寫法并不是一種同步編程的方式：

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

await

• ES 的高級(jí)版本出現(xiàn)了 Promise、await 等異步編程，它們讓程序的寫法更佳的優(yōu)雅簡(jiǎn)介，同樣也要借助于 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 的迭代器同樣也具備異步編程能力，但是這種寫法相當(dāng)晦澀難懂，建議少用：

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();

總結(jié)

上述方法總結(jié)下來就是兩種，一種是強(qiáng)行阻斷式利用 Js 的單線程機(jī)制；另一種就是借助 Js 的異步事件機(jī)制+高級(jí)異步編程語法。當(dāng)然我們?cè)趯?shí)際業(yè)務(wù)情況中使用阻塞 JS 進(jìn)程的地方非常少，經(jīng)常會(huì)通過 UI 來禁止用戶繼續(xù)操作，這樣的探索僅僅是搞清楚一些 Js 的基本原理，有助于我們很好的了解它。

以上就是javascript阻塞問題的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注億速云其它相關(guān)文章！