JS非同期関数キュー関数の解析例-jsチュートリアル-php.cn

JS非同期関数キュー関数の解析例

小云云

リリース： 2017-12-07 15:47:48

オリジナル

1550 人が閲覧しました

同期関数と非同期関数もマスターする必要がある知識です。この記事では主に 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 が入った場合。
a 、 b 、および 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);
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);

ログイン後にコピー

このようにして、キューに入るたびにキューから出るかどうかを判断し、問題は解決します。