JavaScriptのスリープ関数の使用

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 をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • JavaScript 関数型プログラミングの基礎
  • JS関数の継承について学ぶ記事
  • JavaScript 基礎シリーズ: 関数とメソッド
  • JS関数の呼び出し、適用、バインドの超詳細な方法
  • JavaScript 関数呼び出し、適用、バインド メソッドのケース スタディ
  • JavaScript の矢印関数と通常の関数の違いの詳細な説明
  • JavaScript の知識: コンストラクタも関数である
  • JavaScript における変数と関数の昇格の詳細な例
  • JavaScript の 50 以上のユーティリティ関数の概要
  • 集める価値のある 15 個の JavaScript 関数

<<:  MLSQL スタックでストリームのデバッグを簡単にする方法

>>:  Linux を使用して時間指定ファイルが占有するディスク容量を計算する方法

推薦する

スネークゲームのアイデアを実現するためのJavaScript

JavaScriptゲームSnakeの実装アイデア(完全なコード実装)を参考までに説明します。具体...

MySQL 5.7.18 のインストール中に MySQL サービスの起動に失敗する問題の解決策

MySQL は非常に強力なリレーショナル データベースです。しかし、初心者の中には、インストールや設...

Reactの基本のまとめ

目次序文始めるReactライフサイクルリアクトファイバーリアクトセットステートReactイベントメカ...

CSS3 背景コントロールプロパティと色遷移を使用してグラデーション効果を実現します。

CSS3 背景画像関連互換性: IE9+背景クリップ 背景画像描画領域background-cli...

Nginx は https ウェブサイト構成コード例を実装します

https ベースポート 443。これはキーと呼ばれるものに使用されます。これらのことを理解せずにで...

Web デザイン: Web ミュージックの実装テクニック

<br />Web ページに音楽を挿入する場合、サフィックスに応じて異なるコードを記述す...

Nginx http ヘルスチェック構成プロセス分析

パッシブチェックパッシブ ヘルス チェックでは、NGINX と NGINX Plus はイベントの発...

MySQLデータベースホスト127.0.0.1とlocalhostの違い

私の友人の多くは、127.0.0.1 と localhost の違いがわからず、問題に遭遇するかもし...

MySQLでルートユーザーのパスワードを変更する方法

方法1: SET PASSWORDコマンドを使用する mysql> username@loca...

MySQL スロークエリログの基本的な使い方チュートリアル

スロークエリログ関連のパラメータMySQL スロー クエリ関連のパラメータの説明: slow_que...

Centos7にTenda U12ワイヤレスネットワークカードドライバーをインストールする際の問題を解決する

解決プロセス:方法1: CentOS7.3 のデフォルトのカーネル バージョンは低く、3.10.0-...

ul リスト タグ デザイン ウェブ ページ 複数列レイアウト

数日前、CSS で 3 列レイアウトを書いていたときに、突然この方法を思いつきました。このアイデアは...

Python スクリプトを Ubuntu で直接実行する方法

翻訳プログラムを例に挙げてみます。前回はWindowsでのアプリケーションのパッケージ化についてお話...

JavaScript演算子の使用に関するヒントをいくつか共有します

目次1. オプションの連鎖演算子 [? .】 2. 論理的な空の代入 (?? =) 3. 論理和代入...

MySQL の分離レベルの包括的な分析

データベースが同じデータ バッチを同時に追加、削除、および変更すると、ダーティ書き込み、ダーティ読み...