この記事では、主に JS の非同期関数キュー関数を紹介し、サンプルの形で非同期関数キューのアプリケーション シナリオ、実装方法、および関連する操作テクニックを分析します。 JS非同期関数キュー関数。参考までに皆さんと共有してください。詳細は次のとおりです:
シナリオ: ライブブロードキャストを行うと、入場ニュースと入場特殊効果が表示されます。ユーザーがマウントを持っている場合は、表示する必要があります。数秒間特殊効果をマウントする場合、複数の人が同時に入場した場合、どのように表示されるべきですか?このとき、setTimeout 関数を考えることになります。はい、そのアイデアは良いのですが、非同期関数キューを実装するにはどうすればよいでしょうか。コードに直接移動します:
var Queue = function() { this.list = []; }; Queue.prototype = { constructor: Queue, queue: function(fn) { this.list.push(fn) return this; }, wait: function(ms) { this.list.push(ms) return this; }, dequeue: function() { var self = this, list = self.list; self.isdequeue = true; var el = list.shift() || function() {}; if (typeof el == "number") { setTimeout(function() { self.dequeue(); }, el); } else if (typeof el == "function") { el.call(this) if (list.length) { self.dequeue(); } else { self.isdequeue = false; } } } };
例: a と b がほぼ同時に入った場合、 a と b が完全にキューから出ていないときに
c が入った場合、 b、c 列の後に来ました。var q = new Queue(); function a() { console.log("a执行了", new Date()); } function b() { console.log("b执行了", new Date()); } function c() { console.log("c执行了", new Date()); } function d() { console.log("d执行了", new Date()); } q.wait(2000); q.queue(a); q.wait(2000); q.queue(b); q.dequeue(); setTimeout(function(){//3S之后进来的 q.wait(2000); q.queue(c); },3000); setTimeout(function(){//8S之后进来的 q.wait(2000); q.queue(d); q.dequeue(); },8000);
しかし、一般に、ユーザーがいつサイトに入ったかは、キューに入った後でわかりません。デキューすることはできますが、キューが空のときにユーザーが入ってくると、以前のデキューの再帰呼び出しが完了するため、入ってきたときに再度デキュー操作を実行する必要があります。 それで、コードは次のようになります:
var q = new Queue(); function a() { console.log("a执行了", new Date()); } function b() { console.log("b执行了", new Date()); } function c() { console.log("c执行了", new Date()); } function d() { console.log("d执行了", new Date()); } q.wait(2000); q.queue(a); if (!q.isdequeue) { q.dequeue(); } q.wait(2000); q.queue(b); if (!q.isdequeue) { q.dequeue(); } setTimeout(function() { //3S之后进来的 q.wait(2000); q.queue(c); if (!q.isdequeue) { q.dequeue(); } }, 3000); setTimeout(function() { //8S之后进来的 q.wait(2000); q.queue(d); if (!q.isdequeue) { q.dequeue(); } }, 8000);
上記は私が皆さんのためにまとめたもので、将来皆さんのお役に立てれば幸いです。
関連記事:
zTreeでインタラクティブタブを実装する方法vue-cliでのwebpack3の高速化最適化に関する問題
以上がJSを使用して非同期関数を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。