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