複数のsetTimeout()を順番に呼び出すjQuery

フランク

jQueryの約束に頭を悩ませるのに苦労しています。jQueryの約束を調べるために次のスニペットを作成しました。このStackOverflowエントリによって通知されます。

let q = [
  function () { setTimeout(function () { console.log("a - " + Date.now()); }, 5000); },
  function () { setTimeout(function () { console.log("b - " + Date.now()); }, 2500); },
  function () { setTimeout(function () { console.log("c - " + Date.now()); }, 0); }
];
    
function SerialCall(queue) {
  var d = $.Deferred().resolve();
   while (queue.length > 0) {
     d = d.then(queue.shift()); // you don't need the `.done`
   }
}

SerialCall(q);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

私の理解では、jQueryの約束は実行オフに保持すべきであるということであるbcしながら、a実行され、その後の実行オフに保持cしながら、b実行されています。

出力が期待していたのa, b, cですが、取得していc, b, aます。jQueryのpromiseが計画どおりに実行をブロックしていないという事実を説明するために、これらの遅延( 'a':5000、 'b':2500、 'c':0)を意図的に選択したことに注意してください。

何が欠けていますか?期待される動作を得るためにコードをどのように変更する必要がありますか?

マイケルギアリー

あなたが間違っているのは、約束が実行を妨げると考えることです。そうではありません。promiseは、コールバック関数を作成するためのもう1つの方法です。JavaScriptがネイティブに提供する以上の魔法を追加することはありません。(私はアドレッシングいないよasync/awaitすべてのコールバックが呼び出される前に完了するまで、あなたのコードの実行のすべて、ここでは単に「伝統的な」JavaScriptを。)。

それはあなたが問題にぶつかっているところです。あなたのwhileループが完了するまで実行さこれまで呼び出されます、あなたのキューの機能のいずれかの前に:

while (queue.length > 0) {
    d = d.then(queue.shift()); // you don't need the `.done`
}

あなたがしているように複数の関数がタイムアウトで呼び出されるようにしたい場合、それを行う最良の方法はsetTimeout()、あなたのコードが今しているように、すべての呼び出しを一気に実行しないことです。代わりに、各callback関数に次関数を開始させsetTimeout()ます。このようにすると、いつでも保留中のタイムアウトは1つだけになり、タイムアウトが発生すると、次のタイムアウトが開始されます。

私は何年も前にこれと呼ばれるjQueryプラグインを作成しましたslowEach(実際にはjQueryに依存せず、同じ手法がjQuery以外のコードでも機能します。)

コードはpromiseを使用しません(数年前に作成されます)が、promiseを使用する場合でも、従来のコールバックを使用する場合でも、原則は同じです。単一のsetTimeout()から始めて、そのコールバック関数が呼び出されたら、次のを開始しsetTimeout()ます。これにより、単純なwhileループで期待していた方法でタイムアウトがシーケンスされます

元のslowEach()コードはこの回答にあります。それ以来、何人かの人々がコードを改善してきました。特に、これコールバックを追加するバージョンonCompletionあり、配列全体が処理されたときに別のコールバックを取得します。

このコードはpromiseを使用していませんが、さらに重要なことに、機能します。:-) promiseを使用するようにコードを適応させることは興味深い演習です。

ただし、JavaScriptが次のコード行を実行する前に、Promiseが実行されるのを待つとは限りません。あなたが使用している場合を除きasync/ await、あなたがしているランニングは通常の何でもループ- 、whilefor何でも-常に前に完了するまで実行されます任意の通常のコールバックや約束- -コールバックの実行を取得します。

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

約束を返すことで複数のsetTimeoutsを順番に呼び出す

分類Dev

Angular-複数のHTTP呼び出しを順番に行う

分類Dev

Angular-複数のHTTP呼び出しを順番に行う

分類Dev

React Redux:複数の依存アクションを順番に呼び出す方法

分類Dev

Angular 8RXJS-複数のHTTP呼び出しを順番に行う

分類Dev

RxJava、Retrofit、RxKotlinフラットマップを使用して複数のAPIを順番に呼び出す

分類Dev

ng-click、single clickを使用して複数の関数を順番に呼び出し、同じ変数を複数の関数に渡しますangularjs

分類Dev

非同期で、setTimeoutのカップルを順番に呼び出すのを待ちます

分類Dev

reduxsagasを順番に呼び出す

分類Dev

配列内で関数のセットを順番に呼び出す

分類Dev

ajax関数を順番に呼び出す方法は?

分類Dev

複数のAPIURLを呼び出し、同時に呼び出す

分類Dev

boost :: asio :: tcp :: ip :: read_some呼び出しから複数のデータを順番に受信するにはどうすればよいですか?

分類Dev

Spring-MVC : 複数のユーザーがメソッドを順番に呼び出せるようにする方法

分類Dev

複数のbashスクリプトを呼び出し、それらを順番にではなく並行して実行する

分類Dev

setIntervalを使用してforループで関数を順番に呼び出す方法

分類Dev

AngularJS-ng-clickで2つの関数を順番に呼び出さない

分類Dev

Emacsでインタラクティブ関数を順番に呼び出す

分類Dev

Angular2関数を順番に連続して呼び出します

分類Dev

Jquery非同期呼び出しを順番に

分類Dev

他のタスクを順番に呼び出すGradleタスク

分類Dev

jQuery .on( "change" ... event)内から複数の関数を呼び出す

分類Dev

Jqueryは複数の関数呼び出しを防ぎます

分類Dev

React.js Axiosを順番に呼び出す方法は?

分類Dev

guvnorルールを順番に呼び出す

分類Dev

$q で promise を順番に呼び出す方法

分類Dev

複数の非同期関数を呼び出された順に実行する方法(FIFO?)

分類Dev

相互に関数を呼び出す複数の条件変数

分類Dev

順序を呼び出す複数のメソッドのテスト

Related 関連記事

  1. 1

    約束を返すことで複数のsetTimeoutsを順番に呼び出す

  2. 2

    Angular-複数のHTTP呼び出しを順番に行う

  3. 3

    Angular-複数のHTTP呼び出しを順番に行う

  4. 4

    React Redux:複数の依存アクションを順番に呼び出す方法

  5. 5

    Angular 8RXJS-複数のHTTP呼び出しを順番に行う

  6. 6

    RxJava、Retrofit、RxKotlinフラットマップを使用して複数のAPIを順番に呼び出す

  7. 7

    ng-click、single clickを使用して複数の関数を順番に呼び出し、同じ変数を複数の関数に渡しますangularjs

  8. 8

    非同期で、setTimeoutのカップルを順番に呼び出すのを待ちます

  9. 9

    reduxsagasを順番に呼び出す

  10. 10

    配列内で関数のセットを順番に呼び出す

  11. 11

    ajax関数を順番に呼び出す方法は?

  12. 12

    複数のAPIURLを呼び出し、同時に呼び出す

  13. 13

    boost :: asio :: tcp :: ip :: read_some呼び出しから複数のデータを順番に受信するにはどうすればよいですか?

  14. 14

    Spring-MVC : 複数のユーザーがメソッドを順番に呼び出せるようにする方法

  15. 15

    複数のbashスクリプトを呼び出し、それらを順番にではなく並行して実行する

  16. 16

    setIntervalを使用してforループで関数を順番に呼び出す方法

  17. 17

    AngularJS-ng-clickで2つの関数を順番に呼び出さない

  18. 18

    Emacsでインタラクティブ関数を順番に呼び出す

  19. 19

    Angular2関数を順番に連続して呼び出します

  20. 20

    Jquery非同期呼び出しを順番に

  21. 21

    他のタスクを順番に呼び出すGradleタスク

  22. 22

    jQuery .on( "change" ... event)内から複数の関数を呼び出す

  23. 23

    Jqueryは複数の関数呼び出しを防ぎます

  24. 24

    React.js Axiosを順番に呼び出す方法は?

  25. 25

    guvnorルールを順番に呼び出す

  26. 26

    $q で promise を順番に呼び出す方法

  27. 27

    複数の非同期関数を呼び出された順に実行する方法(FIFO?)

  28. 28

    相互に関数を呼び出す複数の条件変数

  29. 29

    順序を呼び出す複数のメソッドのテスト

ホットタグ

アーカイブ