javascript 은 sleep 함 수 를 사용 하 는 흔 한 방법 에 대한 상세 한 설명

이 글 의 실례 는 자 바스 크 립 트 가 sleep 함 수 를 사용 하 는 흔 한 방법 을 설명 하 였 다.여러분 께 참고 하도록 공유 하 겠 습 니 다.구체 적 으로 는 다음 과 같 습 니 다.
1.sleep 함수 가 무엇 입 니까?
sleep 함수 에 대해 이야기 하 는 데 시간 이 좀 걸 립 니 다.우선 sleep 함수 가 무엇 입 니까?
sleep 는 함수 입 니 다.프로그램 이 지정 한 시간 을 멈 추고 지연 시 키 는 역할 을 합 니 다.
예 를 들 면:

console.log('1');
sleep(5000);
console.log('2');

콘 솔 에서 숫자 1 을 출력 하면 5 초 간격 으로 숫자 2 를 출력 합 니 다.
물론 위의 코드 는 실행 할 수 없습니다.왜냐하면 js 에는 sleep 방법 이 없 기 때 문 입 니 다.
그래서 이 글 은 주로 js 에서 sleep 를 실현 하 는 몇 가지 방식 을 소개 한다.
2.왜 sleep 를 사용 합 니까?
여기 보면 왜 sleep 을 사용 하 느 냐 고 물 어 보 는 사람 이 있 습 니 다.위의 예 는 setTimeout 으로 이 루어 질 수 있 습 니 다.
setTimeout 은 리 셋 함 수 를 통 해 정시 작업 을 실현 하기 때문에 다 중 작업 의 장면 에서 리 셋 세트 가 나타 납 니 다.

console.time('runTime:');
setTimeout(function(){
 console.log('1')
 setTimeout(function(){
 console.log('2');
 setTimeout(function(){
  console.log('3');
  console.timeEnd('runTime:');
 }, 2000);
 }, 3000);
}, 2000);
// 1
// 2
// 3
// runTime:: 7013.104ms

위의 방식 에 컴 포 지 팅 문제 가 존재 합 니 다.우 리 는 우아 한 방식 으로 위의 예 를 실현 하 기 를 바 랍 니 다.

sleep(2000);
console.log('1');
sleep(3000);
console.log('2');
sleep(2000);
console.log('3');
...

3.sleep 실현
이제 우 리 는 각각 몇 가지 다른 방법 으로 sleep 방법 을 실현 할 것 이다.
1.Date 기반 구현
사 순환 을 통 해 코드 의 실행 을 막 는 동시에 시간 초과 여 부 를 끊임없이 비교 합 니 다.

function sleep(time){
 var timeStamp = new Date().getTime();
 var endTime = timeStamp + time;
 while(true){
 if (new Date().getTime() > endTime){
  return;
 } 
 }
}
console.time('runTime:');
sleep(2000);
console.log('1');
sleep(3000);
console.log('2');
sleep(2000);
console.log('3');
console.timeEnd('runTime:');
// 1
// 2
// 3
// runTime:: 7004.301ms

단점:
이상 의 코드 는 스 레 드 를 휴면 시 키 지 않 고 높 은 부하 계산 을 통 해 cpu 가 다른 작업 을 처리 할 시간 이 없습니다.
이렇게 하 는 단점 은 sleep 과정 에서 다른 모든 작업 이 일시 정지 되 고 dom 의 렌 더 링 을 포함 하 는 것 이다.
그래서 sleep 과정 에서 프로그램 은 가사 상태 에 있 고 다른 임 무 를 수행 하지 않 습 니 다.
2.Promise 기반 sleep
ajax 의 리 셋 내장 문 제 를 해결 하기 위해 jQuery 1.8 이후 Promise 를 지원 합 니 다.그러나 단순 한 Promise 는 이전의 세로 플러그 인 을 가로 플러그 인 으로 바 꾸 었 을 뿐,
최종 결 과 는 다음 코드 입 니 다.

function sleep(time){
 return new Promise(function(resolve){
 setTimeout(resolve, time);
 });
}
console.time('runTime:');
console.log('1');
sleep(1000).then(function(){
 console.log('2');
 sleep(2000).then(function(){
 console.log('3');
 console.timeEnd('runTime:');
 });
});
console.log('a');
// 1
// a
// 2
// 3
// runTime:: 3013.476ms

이것 은 사실 이전의 setTimeout 플러그 와 별 차이 가 없고 보기 흉 하 다.
우 리 는 다시 최적화 하여 ES6 의 Generator 함 수 를 사용 하여 위의 예 를 고 칩 니 다.
3.Generator 함수 기반 sleep
저 희 는 sleep 의 실행 에 대해 Generator 함 수 를 사용 하여 실행 하고 co 와 결합 하여 자체 실행 합 니 다.
코드 보기:

var co = require('co');
 
function sleep(time){
 return new Promise(function(resolve){
 setTimeout(resolve, time);
 });
}
 
var run = function* (){
 console.time('runTime:');
 console.log('1');
 yield sleep(2000);
 console.log('2');
 yield sleep(1000);
 console.log('3'); 
 console.timeEnd('runTime:');
}
 
co(run);
console.log('a');
// 1
// a
// 2
// 3
// runTime:: 3004.935ms

전체적인 코드 가 끼 워 넣 은 관계 가 없어 보 이 는 것 이 편 하 다.
또한 집행 과정 에서 가사 상황 이 발생 하지 않 고 다른 임무 의 집행 을 막 지 않 는 다.
그러나 코 실행 기의 인용 이 하나 더 생 겨 서 하 자가 있 습 니 다.
물론 이것 은 최종 판이 아니다.왜냐하면 ES7 이 우리 에 게 새로운 해결 방안 을 가 져 다 주 었 기 때문이다.
4.async 함수 기반 sleep
ES7 에 async 함수 가 추가 되 었 습 니 다.async 함수 의 가장 큰 특징 은 자체 실행 기 입 니 다.그래서 우 리 는 co 를 통 해 sleep 를 실현 하지 않 아 도 됩 니 다.
코드 보기:

function sleep(time){
 return new Promise((resolve) => setTimeout(resolve, time));
}
 
async function run(){
 console.time('runTime:');
 console.log('1');
 await sleep(2000);
 console.log('2');
 await sleep(1000);
 console.log('3'); 
 console.timeEnd('runTime:');
}
 
run();
console.log('a');
 
// 1
// a
// 2
// 3
// runTime:: 3009.984ms

효 과 는 이전 과 같다.
5.child 사용 하기process(하위 프로 세 스)sleep 함수 구현
앞에서 몇 가지 간단 한 sleep 실현 을 소 개 했 는데 그 다음 에 비교적 어 려 운 실현 을 보 겠 습 니 다.
원 리 는 sleep 를 하위 프로 세 스에 두 고 실행 하 는 것 입 니 다.다른 프로 세 스에 영향 을 주지 않 습 니 다.코드 를 보십시오.

var childProcess = require('child_process');
var nodeBin = process.argv[0];
 
function sleep(time) {
 childProcess.execFileSync(nodeBin, ['-e', 'setTimeout(function() {}, ' + time + ');']);
 // childProcess.spawnSync(nodeBin, ['-e', 'setTimeout(function() {}, ' + time + ');']);
}
 
console.time('runTime:');
console.log('1');
sleep(1000);
console.log('2');
sleep(2000);
console.log('3');
console.timeEnd('runTime:');
 
// 1
// 2
// 3
// runTime:: 3579.093ms

상기 코드 는 childProcess 대상 의 exec FileSync 또는 spawnSync 를 통 해 동기 화 프로 세 스 를 만 듭 니 다.
동기 화 프로 세 스에 서 타 이 머 를 실행 하고 타 이 머 를 실행 한 후 프로 세 스 를 회수 하 며 프로그램 을 계속 실행 합 니 다.
6.npm sleep 패키지 사용
앞의 내용 은 모두 우리 가 실현 한 것 이다.사실 npm 에는 이미 관련 된 js 가방 이 많다.
그들 이 어떻게 이 루어 졌 는 지 보 자,sleep.

var sleep = require('sleep');
 
console.log('1');
console.time('runTime:');
sleep.sleep(2); //  2  
console.log('2');
sleep.msleep(1000); //  1000  
console.log('3');
sleep.usleep(1000000) //  1000000   = 1 
console.log('4');
console.timeEnd('runTime:');
 
// 1
// 2
// 3
// 4
// runTime:: 4014.455ms

sleep 패 키 지 는 C++로 작 성 된 다음 Node 로 확장 하여 sleep 함 수 를 실현 합 니 다.
좋 은 선택 이 야.
이상 은 sleep 의 여섯 가지 간단 한 실현 이다.모두 가 문 제 를 지적 하 는 것 을 환영 합 니 다.우 리 는 함께 진보 합 니 다.
관심 있 는 친 구 는 온라인 HTML/CSS/JavaScript 코드 실행 도 구 를 사용 할 수 있 습 니 다.http://tools.jb51.net/code/HtmlJsRun상기 코드 실행 효 과 를 테스트 할 수 있 습 니 다.
더 많은 자 바스 크 립 트 관련 내용 은 본 사이트 의 주 제 를 볼 수 있 습 니 다.
본 고 에서 말 한 것 이 여러분 의 자 바스 크 립 트 프로 그래 밍 에 도움 이 되 기 를 바 랍 니 다.