概要まず、setTimeout 遅延の動作メカニズムを簡単に見てみましょう。 setTimeout は、まずコールバック関数を待機キューに配置し、待機領域にある他のメイン プログラムが実行された後、コールバック関数を時系列順に実行します。それは本質的には範囲の問題です。 したがって、これを実行すると、目的の出力 1.2.3.4.5 は得られず、5 つの連続した 6 が出力されます。 (var i=1; i<=5; i++) の場合 { setTimeout(関数タイマー() { コンソールにログ出力します。 }, i*1000 ); } これは、setTimeout が非同期で実行されるためです。for ループが実行されるたびに、setTimeout は 1 回実行されますが、内部の関数は実行されません。代わりに、タスク キューに配置され、実行を待機します。メインライン上のタスクが完了した場合にのみ、タスクキュー内のタスクが実行されます。つまり、 for ループが完全に終了するまで待機してから fun 関数を実行します。ただし、 for ループが終了すると、 i の値は 6 になっています。そのため、タイマーは 5 秒間実行されますが、コンソールの内容は 6 のままです。 (注: for ループは、開始から終了まで数マイクロ秒または数ミリ秒続く必要があります。タイマーが 1 秒経過すると、for ループはすでに完了しています。) 別のケースを見てみましょう。 (var i=1; i<=5; i++) の場合 { (関数() { setTimeout(関数タイマー() { コンソールにログ出力します。 }, i*1000 ); })(); } setTimeout の動作メカニズムから、すべての外部メイン プログラムが最初に実行されることがわかります。for ループではクロージャが形成されますが、fun は実際のパラメーターを見つけないため、最初の例と実際の違いはなく、5 つの連続した 6 が引き続き出力されます。 解決策 1: クロージャクロージャを使用するのは古典的なアプローチです。 (var i=1; i<=5; i++) の場合 { (関数(j) { setTimeout(関数タイマー() { コンソールログ(j); }, j*1000 ); })(私); } 予想される結果は、1 から 5 までの順番の出力と一致していることがわかります。これは、実際のパラメータがタイマー内の i に強く依存しているためです。 クロージャを通して、変数 i がメモリ上に常駐します。j が出力される際、外部関数の変数値 i が参照されます。i の値はループに基づいており、setTimeout が実行されると内部の出力が決定されます。 解決策2: 構造を分割するsetTimeout の定義と呼び出しを別の部分に分けることもできます。 関数タイマー(i) { タイムアウトを設定します( console.log( i ), i*1000 ); } (var i=1; i<=5; i++) の場合 { タイマー(i); } コンソールの出力は、引き続き 1 から 5 の順になっています。 解決策3:es6 の let を使用してこの問題を解決する別の方法を次に示します。 (i=1; i<=5; i++) の場合 { setTimeout(関数タイマー() { コンソールにログ出力します。 }, i*1000 ); } 最初の例と比較すると、この例では var が let に変更されるだけですが、コンソールには 1 から 5 が順番に出力されます。 for ループの先頭にある let は i を for ループにバインドするだけでなく、実際にループ本体の各反復に再バインドし、前の反復の終了時の値が再割り当てされるようにします。 setTimeout の function() は新しいスコープに属します。var で定義された変数は、この関数の実行スコープに渡すことはできません。let を使用してブロック変数を宣言すると、このブロックで動作できるため、function は変数 i を使用できます。この匿名関数のパラメーター スコープは for パラメーターのスコープとは異なりますが、これは this を利用して実現されています。この匿名関数のスコープはクラスの属性に多少似ており、内部メソッドで使用できます。 解決策4: setTimeoutの3番目のパラメータ(i=1; i<=5; i++) の場合 { setTimeout(関数タイマー() { コンソールにログ出力します。 }, i*1000, i ); } 毎回渡されるパラメータはforループから取得した値なので、1~5が順番に出力されます。 上記は、JS の for ループで setTimeout を使用するための 4 つのソリューションの詳細です。JS で setTimeout を使用する方法の詳細については、123WORDPRESS.COM の他の関連記事に注目してください。 以下もご興味があるかもしれません:
|
>>: Docker での RocketMQ の詳細なインストールと使用
Firefox は、多くの拡張機能とプラグインを備えた、よく使用されるブラウザです。IE に比べて多...
第1章: keepalivedの紹介VRRP プロトコルの目的は、静的ルーティングの単一点障害問題を...
多くの場合、移行は避けられません。ハードウェアのアップグレード、データ センターの変更、古いオペレー...
前提条件Compose は、Docker コンテナをオーケストレーションするためのツールです。Doc...
休憩中に、眠気を完全に吹き飛ばす電話がかかってきました。「開発者が更新 SQL を書くときに whe...
序文この記事では主に、MySQL ストレージ テーブル エラー「java.sql.SQLExcept...
以下のように表示されます。 XML/HTML コードコンテンツをクリップボードにコピーbody、di...
Docker システムの学習チュートリアルでは、Dockerfile を使用して Docker イメ...
目次導入1. one-click.jsとは2. パッケージングツールはどのように機能しますか? 3....
それは何ですか? em はフォントの高さを指し、どのブラウザでもデフォルトのフォントの高さは 16 ...
導入この章では、主に Linux で FTP サーバーを構築するプロセスを紹介します。習得すべき重要...
JavaScriptで非同期実行の結果を同期的に取得するには、 for ループ内でawaitを使用...
目次1. はじめに2. 直接回復2.1 mysqldumpバックアップの完全リカバリ2.2 xtra...
素敵なフリップログインと登録インターフェースを作成する序文最近、ネットワーク ディスクを構築しようと...
Java開発キットjdkをダウンロードするJDK のダウンロード アドレスはhttp://www.o...