スリープ機能を実装する4つの方法

睡眠機能の実装は、候補者のJSの基本的なスキルを調べる試験問題です。一緒にこの質問を調べてみましょう〜

方法1：Promise+を使用してから

PromiseのsetTimoutを使用してタイマーを設定し、それを介してコールバックを実行します。

// 使用Promise实现sleep

const sleep = time => {
    
    
  return new Promise(resolve => {
    
    
    setTimeout(resolve,time)
  })
}

var start = new Date().getTime();
sleep(2000).then(() => {
    
    
  console.log(1);
  var end = new Date().getTime();       
  console.log(end-start+'ms');  // 2004ms
})

方法2：ジェネレーター関数を使用して+次に

ジェネレーター関数のyieldキーワードを介してPromiseを返し、next（）。value.thenを介して呼び出します。

function* sleep(time) {
    
    
  yield new Promise(resolve => {
    
    
    setTimeout(resolve, time)
  })
}

var start = new Date().getTime();
sleep(2000).next().value.then(() => {
    
    
  console.log(1);
  var end = new Date().getTime();
  console.log(end - start + 'ms');  // 2003ms
})

方法3：async+awaitを使用する

async + awaitメソッドは、非同期ブロッキングタスクを実装できます。

function sleep(time) {
    
    
  return new Promise(resolve => {
    
    
    setTimeout(resolve, time)
  })
}

var start = new Date().getTime();
async function output() {
    
    
  await sleep(2000);
  var end = new Date().getTime();
  console.log(end - start + 'ms');  // 2002ms
}
output()

方法4：setTimeoutを介して直接実装する

function sleep(callback,time) {
    
    
  setTimeout(callback,time);
}
const start = new Date().getTime();

function output() {
    
    
  console.log(111);
  const end = new Date().getTime();
  console.log(`${
      
      end - start} ms`); // 2006 ms
}

sleep(output,2000)

RQ：タイマーが実行された後に時間エラーが発生するのはなぜですか？

setTimeoutはマクロタスクに属しているため、現在の実行スタックで実行されているタスクが、マクロタスクを実行する前にタイマーによって設定された時間を超えるとエラーが発生する可能性があります。