JSを使用して非同期関数を実装する方法

この記事では、主に 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);

ここでは、デキューをいつ呼び出すかを決定する必要があります。 (
なぜ c がキューに入ったときにデキューする必要がないのに、 d が入ったときにデキューが必要になるのでしょうか?

しかし、一般に、ユーザーがいつサイトに入ったかは、キューに入った後でわかりません。デキューすることはできますが、キューが空のときにユーザーが入ってくると、以前のデキューの再帰呼び出しが完了するため、入ってきたときに再度デキュー操作を実行する必要があります。 それで、コードは次のようになります:

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でインタラクティブタブを実装する方法

EasyUIでのabsの使い方を詳しく説明

vue-cliでのwebpack3の高速化最適化に関する問題

以上がJSを使用して非同期関数を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。