ホームページ >ウェブフロントエンド >jsチュートリアル >JS非同期関数キュー機能とその操作スキル

JS非同期関数キュー機能とその操作スキル

小云云オリジナル: 2017-11-30 11:33:581421ブラウズ

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 が入った場合、a、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 が入ったときにデキューが必要になるのはなぜですか?)

しかし、一般に、ユーザーがいつサイトに入ったかはわかりません。通常、キューに入った後は退出できるはずです。 . Queue ですが、キューが空のときにユーザーが入ってくると、以前の dequeue の再帰呼び出しが実行されるため、入ってきたときに再度実行する必要があります。デキュー操作。

つまり、コードは次のようになります:

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);

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

上記の内容は、JSの非同期関数キュー機能の実装方法と関連する操作テクニックです。

JS非同期関数キュー機能とその操作スキル

関連記事