javascript阻塞問題

javascript 阻塞程式執行

javascript的執行緒問題

---

JavaScript 是單執行緒的，一段Js 程式的執行會佔滿整個程式進程，我們通常會想辦法的透過非同步程式來減少程式的阻塞，但在某些特殊的場景下我們需要阻塞程式的運行，那麼今天就反其道而行之，看看透過怎麼樣正常的方式來阻塞Js 運作。

方法一:無限迴圈

---

• #單執行緒的JavaScript 可以給我們靈感，只要程式不斷的運算就可以阻塞程序的進程：
  

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

function test() {
    console.log(&#39;sleep&#39;);
    sleep(10000);
    console.log(&#39;run&#39;);
}

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 的基本原理，有助於我們很好的了解它。

推薦教學：《JS教學》

以上是javascript阻塞問題的詳細內容。更多資訊請關注PHP中文網其他相關文章！