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가 거의 동시에 들어오는 경우
c는 a와 b가 대기열에서 완전히 벗어나지 않은 경우에 들어옵니다. 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);

위 내용은 제가 모든 사람을 위해 편집한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

관련 기사:

zTree에서 대화형 탭을 구현하는 방법

EasyUI에서 ABS 사용에 대해 자세히 설명

vue-cli에서 webpack3 속도 향상 최적화 관련 문제

위 내용은 JS를 사용하여 비동기 함수를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!