Функция сна в JavaScript

1. функция сна

JavaScript работает в одном потоке и не имеет встроенной функции сна, а теперь имитирует эффект отложенного выполнения сна.
Используйте функцию сна для реализации кода светофора: красный свет — 2 секунды, желтый свет — 1 секунда, зеленый свет — 3 секунды, а цвет меняется циклически.

2. setTimeout

Реализовать напрямую с помощью setTimeoutsleep()У метода лучшая совместимость, но используется реализация callback-функции, а читабельность и ремонтопригодность кода не очень.

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

sleep(fun,2000);

setTimeout

setTimeoutЭто самая простая реализация.Код выглядит следующим образом, используя рекурсию для циклического изменения цвета:

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

3.Promise

В синтаксисе ES6PromiseдаsleepСпособ реализации асинхронных методов с помощьюPromiseМетоды могут быть построены элегантноsleepМетод реализации избегает использования обратных вызовов функций.

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

Promise

Используйте Promise, затем запишите следующее изменение цвета и, наконец, используйте рекурсию для завершения цикла. Используйте обещание вместо setTimeout, используйте цепные вызовы, а затем, чтобы реализовать преобразование источников света, затем возвращает объект обещания, когда объект находится в состоянии разрешения, тогда его можно продолжать вызывать.

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

4. async await

async awaitна самом деле гeneratorа такжеpromiseсинтаксический сахар на основе предоставления метода синхронного программирования для реализации асинхронных вызовов,sleepТакже широко используется семантическая поддержка функций.sleepспособ реализации.

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

wait(3000);

async await использовать

Использование async await может избежать серии .then.then.then Promise и больше не требует рекурсии, используйтеwhile(true)цикл может быть достигнут.

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

5. Выход 1 через 1 с, выход 2 через 2 с, выход 3 через 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);
}

Справочная статья:

• светофор
• светофор