집 > 기사 > 웹 프론트엔드 > JS 비동기 함수 큐 함수 예시 분석

JS 비동기 함수 큐 함수 예시 분석

小云云원래의: 2017-12-07 15:47:481553검색

동기 함수와 비동기 함수도 우리가 마스터해야 할 지식입니다. 이 글에서는 주로 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가 거의 동시에 들어오는 경우
c는 a와 b가 대기열에서 완전히 벗어나기 전에 들어옵니다.
d in 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);

여기서 언제 dequeue를 호출하여 dequeue할지 결정해야 합니다. (c가 대기열에 들어갈 때는 dequeue가 필요하지 않지만 d가 들어올 때는 dequeue가 필요한 이유는 무엇입니까? )

그러나 일반적으로 사용자가 사이트에 언제 입장하는지 알 수 없습니다. Dequeue는 가능하지만, Queue가 비어 있을 때 사용자가 들어오면 이전의 Dequeue 재귀 호출이 완료되고, 들어올 때 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 비동기 함수 큐 함수 예시 분석

관련 기사