JavaScript sleep 수면 함수 사용

1.sleep 함수
JavaScript 는 단일 스 레 드 로 실 행 됩 니 다.내 장 된 sleep 함수 가 없습니다.현재 sleep 지연 실행 효 과 를 모 의 합 니 다.
수면 함 수 를 사용 하여 신호등 코드,빨 간 불 2 초,노 란 불 1 초,녹색 불 3 초 를 실현 하고 색깔 을 순환 적 으로 바 꿉 니 다.
2. setTimeout
setTimeout 을 직접 사용 하여 sleep()를 실현 하 는 방법 은 호환성 이 가장 좋 지만 리 셋 함수 의 실현 방식 을 사용 하여 코드 의 가 독성 과 유지 보수 성 이 좋 지 않 습 니 다.

// 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
ES6 의 문법 에서 Promise 는 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 를 사용 하여 다음 색상 변 화 를 then 에 쓰 고 마지막 으로 재 귀 를 사용 하여 순환 을 완성 합 니 다.
setTimeout 대신 promise 를 사용 하여 체인 호출 과 then 을 이용 하여 램프 의 전환 을 실현 합 니 다.then 은 promise 대상 을 되 돌려 줍 니 다.이 대상 이 resolve 상태 인 then 은 지속 적 으로 호출 할 수 있 습 니 다.

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 는 실제 generator 와 promise 의 문법 사탕 으로 동기 화 프로 그래 밍 방식 을 제공 하여 비동기 호출 을 실현 하 는 토대 에서 sleep 함수 의 의미 화 에 대한 지원 을 만족 시 키 는 동시에 자주 사용 하 는 sleep 의 실현 방식 이기 도 합 니 다.

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

wait(3000);

async await 사용
async await 를 사용 하면 Promise 의 일련의.then.then 을 피 할 수 있 고 재 귀적 필요 도 없 으 며 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.1s 후 출력 12s 후 출력 23s 후 출력 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);
}

참고 글:
신호등
신호등
자 바스 크 립 트 sleep 수면 함수 사용 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.자 바스 크 립 트 sleep 수면 함수 에 관 한 더 많은 내용 은 예전 의 글 을 검색 하거나 아래 의 관련 글 을 계속 찾 아 보 세 요.앞으로 많은 응원 부탁드립니다!