집 > 기사 > 웹 프론트엔드 > JS 비동기 함수 큐 기능 및 관련 작업 기술

JS 비동기 함수 큐 기능 및 관련 작업 기술

小云云원래의: 2017-11-30 11:33:581372검색

우리 모두는 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가 거의 동시에 들어오는 경우
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);

여기서 Dequeue에서 Dequeue로 호출할 시기를 결정해야 합니다. (왜 c가 대기열에 들어갈 때는 dequeue가 필요하지 않지만 d가 들어올 때는 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 비동기 함수 큐 기능 및 관련 작업 기술

관련 기사