Use of JavaScript sleep function

function

JavaScript is run by a single thread without a built-in sleep function, and now simulates the effect of sleep delayed execution.

Use the sleep function to implement the traffic light code, red light 2 seconds, yellow light 1 second, green light 3 seconds, and loop to change the color.

2. setTimeout

The method of directly using setTimeout to implement sleep() has the best compatibility, but the implementation method of the callback function is used, and the code is not readable and maintained.

// setTimeout
let fun = () =&gt; ('time out');
let sleep = function(fun,time){
  setTimeout(()=&gt;{
    fun();
  },time);
}

sleep(fun,2000);

setTimeout
setTimeoutIt is the most basic way to implement it，The code is as follows，Use recursion to implement loop changing color：
function changeColor(color) {
 ('traffic-light ', color);
}
function main() {
 changeColor('red');
 setTimeout(()=&gt;{
  changeColor('yellow');
  setTimeout(() =&gt; {
   changeColor('green');
   setTimeout(main, 2000);
  }, 1000);
 }, 2000);
}
main();

In ES6 syntax, Promise is a way to implement the asynchronous sleep method. With the help of the Promise method, you can elegantly build sleep implementation methods, avoiding the use of function callbacks.

// promise
let fun = () => ('time out');
let sleep2= (time)=> new Promise((resolve)=>{
  setTimeout(resolve,time)
})
sleep2(2000).then(fun);

Promise

Use Promise to write the next color change in then, and finally use recursion to complete the loop.

Use promise instead of setTimeout, use chain calls and then to implement the conversion of the lamp, then returns a promise object, which can be continuously called when the object is resolved state.

const traffic_light=(color,duration)=>{
  return new Promise((resolve,reject)=>{
    ('traffic-light ', color);
    setTimeout(()=>{
        resolve()
    },duration)
  })
}
const main=()=>{
    ()
    .then(()=>{
        return traffic_light('red',3000)
    })
    .then(()=>{
        return traffic_light('yellow',1000)
    })
    .then(()=>{
        return traffic_light('green',2000)
    })
    .then(()=>{
        main();
    })
}
main()

4. async await

async await is actually a syntax sugar for generator and promise. On the basis of providing synchronous programming methods to implement asynchronous calls, it also meets the support for sleep function semantics. It is also a commonly used sleep implementation method.

// async await
async function wait(time){
  await sleep2(time);
  fun();
}

wait(3000);

async await use

Using async await can avoid a series of Promise. There is no need to recurse anymore. Using while(true) can implement loops.

function sleep(duration) {
  return new Promise(resolve => {
      setTimeout(resolve, duration);
  })
}
async function changeColor(color, duration) {
 ('traffic-light ', color);
 await sleep(duration);
}
async function main() {
 while (true) {
  await changeColor('red', 2000);
  await changeColor('yellow', 1000);
  await changeColor('green', 3000);
 }
}
main();

5. Output 1 after 1s, 2 after 2 after 3s, 3 after 3

const log = ;
const sleep = (timeout) => {
  return new Promise((resolve)=>{
    setTimeout(()=>{
      resolve();
    }, timeout)
  })
}

const main = async()=>{
  await sleep(1000);
  log(1);
  await sleep(2000);
  log(2);
  await sleep(3000);
  log(3);
}

Reference article:

traffic light
traffic light

This is the end of this article about the use of JavaScript sleep function. For more related contents of JavaScript sleep function, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!