1. The sleep function

JavaScript is running single-threaded, with no built-in sleep function, and now emulates the effect of implementing sleep deferred execution. Use the sleep function to implement the traffic light code, red 2 seconds, yellow 1 seconds, green 3 seconds, changing the color cycle.

2. setTimeout

Sleep () is best implemented with setTimeout, but the code is not readable or maintainable with the callback method.

// setTimeout
let fun = () => console.log('time out');
let sleep = function(fun,time){
  setTimeout(()=>{
    fun();
  },time);
}

sleep(fun,2000);
Copy the code

setTimeout

SetTimeout is the most basic way to do this. The code is as follows:

function changeColor(color) {
	console.log('traffic-light ', color);
}
function main() {
	changeColor('red');
	setTimeout(()=>{
		changeColor('yellow');
		setTimeout(() => {
			changeColor('green');
			setTimeout(main, 2000);
		}, 1000);
	}, 2000);
}
main();
Copy the code

3.Promise

In ES6 syntax, Promise is a way to implement sleep asynchronously. With Promise method, sleep implementation can be built elegantly, avoiding the use of function callbacks.

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

Promise

Use the Promise, write the next color change inside the then, and finish the loop again using recursion. Use a promise instead of a setTimeout, and use chained calls and then to convert the lamp. Then returns a Promise object that can be called continuously if the object is in the resolve state.

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

4. async await

Async await is actually a syntactic candy of generator and promise. On the basis of synchronous programming to realize asynchronous invocation, async await also meets the support of semantics of sleep function, which is also a commonly used implementation of sleep.

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

wait(3000);
Copy the code

async await use

Use async await to avoid a string of promises.then.then.then, and no recursion is needed, while(true) to implement the loop.

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

5. After 1s, 1 2s, 2 3s, 3

const log = console.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);
}
Copy the code

Reference article:

  • The traffic lights
  • The traffic lights