이 글에서는 주로 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);위 내용은 제가 모든 사람을 위해 편집한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다. 관련 기사:
vue-cli에서 webpack3 속도 향상 최적화 관련 문제
위 내용은 JS를 사용하여 비동기 함수를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!