javascript blocking problem

javascript blocks the running of the program

javascript thread problem

JavaScript is single-threaded, and the running of a Js program will Taking up the entire program process, we usually try every means to reduce the blocking of the program through asynchronous programming, but in some special scenarios we need to block the running of the program, so today we will do the opposite and see how it goes. Normal way to block Js from running.

Method 1: Infinite loop

• Single-threaded JavaScript can give us inspiration. As long as the program continues to calculate, the program can be blocked. Process:
  

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

• But this method actually causes a state of suspended animation by occupying the computer's resources indefinitely. It will consume a lot of CPU and This method is not advisable without actually stopping the program process.

Method 2: setTimeout

• We directly use the setTimeout callback to block the process of the program , of course it does not allow the program to continue and idle the CPU, but this way of writing is not a synchronous programming method:

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

await

• ES Asynchronous programming such as Promise and await appears in the advanced version, which makes the writing of the program more elegant. It also needs to be solved with the help of setTimeout. It is recommended to use this method:

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

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

test();

Method 3: generator & yield

• ES6 iterators also have asynchronous programming capabilities, but this writing method is quite obscure and difficult to understand. It is recommended to use it sparingly:

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

Summary

The above methods can be summarized into two types, one is to use the single-thread mechanism of Js in a forced blocking manner; the other is to use the asynchronousness of Js Advanced asynchronous programming syntax for event mechanisms. Of course, we rarely use blocking JS processes in actual business situations. We often prohibit users from continuing operations through the UI. This kind of exploration is just to understand some basic principles of JS and helps us understand it well.

Recommended tutorial: "JS Tutorial"

The above is the detailed content of javascript blocking problem. For more information, please follow other related articles on the PHP Chinese website!