JavaScriptのスリープ関数の使用

1.スリープ機能

JavaScript は単一のスレッドで実行され、組み込みの sleep 関数がありません。ここでは、sleep を使用して実行を遅延させる効果をシミュレートします。

スリープ機能を使用して、信号コードを実装します。赤色の信号が 2 秒間、黄色の信号が 1 秒間、緑色の信号が 3 秒間点灯し、色が周期的に変化します。

2.タイムアウトを設定する

setTimeout を直接使用して sleep() を実装する方法は互換性が最も高くなりますが、コールバック関数を使用した実装方法ではコードの可読性と保守性が低下します。

// タイムアウトを設定する
let fun = () => console.log('time out');
sleep = function(fun,time){ とする
  タイムアウトを設定します(()=>{
    楽しい（）;
  }、時間）;
}

睡眠(楽しい、2000);

タイムアウトの設定
setTimeout は最も基本的な実装方法です。コードは次の通りで、再帰を使用して周期的な色の変更を実装します。
関数 changeColor(色) {
 console.log('信号機', 色);
}
関数main() {
 色を変更します('赤');
 タイムアウトを設定します(()=>{
  色を変更します('黄色');
  タイムアウトを設定する(() => {
   色を変更します('緑');
   setTimeout(メイン、2000);
  }, 1000);
 }, 2000);
}
主要（）;

3. 約束

ES6 構文では、Promise は sleep メソッドを非同期に実装する方法です。Promise メソッドを使用すると、関数コールバックの使用を回避しながら、 sleep 実装メソッドをエレガントに構築できます。

// 約束
let fun = () => console.log('time out');
sleep2 = (time) => new Promise((resolve) => { とします。
  setTimeout(解決、時間)
})
sleep2(2000).その後(楽しい);

約束

Promise を使用して次の色の変更を書き込み、最後に再帰を使用してループを完了します。

setTimeout の代わりに promise を使用し、チェーン呼び出しと then を使用して軽量変換を実現します。 then は promise オブジェクトを返します。このオブジェクトが解決された状態にある場合、 then を継続的に呼び出すことができます。

const traffic_light=(色,持続時間)=>{
  新しい Promise を返します ((resolve,reject)=>{
    console.log('信号機', 色);
    タイムアウトを設定します(()=>{
        解決する（）
    }、間隔）
  })
}
定数main=()=>{
    Promise.resolve()
    .then(()=>{
        戻り値: traffic_light('red',3000)
    })
    .then(()=>{
        戻り値: traffic_light('yellow',1000)
    })
    .then(()=>{
        戻り値: traffic_light('green',2000)
    })
    .then(()=>{
        主要（）;
    })
}
主要（）

4. 非同期待機

async await は、実際には generator と promise の構文糖衣です。非同期呼び出しを実装するための同期プログラミングメソッドを提供し、sleep 関数のセマンティクスもサポートします。また、sleep を実装するためによく使用される方法でもあります。

// 非同期待機
非同期関数 wait(time){
  sleep2(時間)を待ちます。
  楽しい（）;
}

待機(3000);

非同期待機の使用

async await を使用すると Promise の .then.then.then の連続を回避でき、再帰の必要がなくなります。while(true) を使用してループを実装できます。

関数 sleep(期間) {
  新しいPromiseを返します(resolve => {
      setTimeout(解決、期間);
  })
}
非同期関数changeColor(色, 期間) {
 console.log('信号機', 色);
 スリープを待機します(期間);
}
非同期関数main() {
 （真）の間{
  'red' という値の変化を待ちます。
  色の変更を待ちます('黄色', 1000);
  色の変更を待ちます('green', 3000);
 }
}
主要（）;

5. 1秒後に出力1、2秒後に出力2、3秒後に出力3

コンソールにログを出力します。
const sleep = (タイムアウト) => {
  新しいPromise((resolve)=>{ を返す
    タイムアウトを設定します(()=>{
      解決する（）;
    }、 タイムアウト）
  })
}

定数main = async()=>{
  スリープ(1000)を待機します。
  ログ(1);
  眠りを待つ(2000)
  ログ(2);
  スリープを待機します(3000);
  ログ(3);
}

参考記事:

信号機信号機

JavaScript のスリープ関数の使い方に関するこの記事はこれで終わりです。JavaScript のスリープ関数に関するより関連性の高い内容については、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き閲覧してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: