Javascript multi-thread asynchronous queue
First, you need to know the general usage of jQuery. Deferred. Then, let's go to the question: library code: Copy code /*! * Multi-thread asynchronous queue * depends on jQuery 1.8 + (if you use 1.6 or 1.7, you only need to replace the then method in the source code with the pipe method) * // *** @ n {Number} positive integer, Number of threads */function Queue (n) {n = parseInt (n | 1, 10 ); return (n & n> 0 )? New Queue. prototype. init (n): null;} Queue. prototype = {init: function (n) {this. threads = []; this. taskList = []; while (n --) {this. threads. push (new this. thread) }},/*** @ callback {Fucntion} the callback function of the promise object done. Its return value must be a promise object */push: function (callback) {if (typeof callback! = 'Function') return; var index = this. indexOfIdle (); if (index! =-1) {this. threads [index]. idle (callback) try {console. log ('thread-'+ (index + 1) + 'Accept the task! ')} Catch (e) {}} else {this. taskList. push (callback); for (var I = 0, l = this. threads. length; I <l; I ++) {(function (thread, self, id) {thread. idle (function () {if (self. taskList. length> 0) {try {console. log ('thread-'+ (id + 1) + 'Accept the task! ')} Catch (e) {} var promise = self. taskList. pop (); // The correct return value should be a promise object return promise. promise? Promise: thread. promise;} else {return thread. promise}) (this. threads [I], this, I) ;}}, indexOfIdle: function () {var threads = this. threads, thread = null, index =-1; for (var I = 0, l = threads. length; I <l; I ++) {thread = threads [I]; if (thread. promise. state () = 'refreshed') {index = I; break ;}} return index ;}, Thread: function () {this. promise = $. deferred (). resolve (). prom Ise (); this. idle = function (callback) {this. promise = this. promise. then (callback) }}; Queue. prototype. init. prototype = Queue. prototype; sample code for copying: copy the code var queue = new Queue (3); // create a queue with three threads // task-1 queue. push (function () {var defer = $. deferred (); setTimeout (function () {defer. resolve () }, 8000); return defer. promise ()}) // task-2 queue. push (function () {var defer = $. deferred (); setTimeout (Function () {defer. resolve () }, 2000); return defer. promise ()}) // task-3 queue. push (function () {var defer = $. deferred (); setTimeout (function () {defer. resolve () }, 6000); return defer. promise ()}) // task-4 queue. push (function () {var defer = $. deferred (); setTimeout (function () {defer. resolve () }, 3000); return defer. promise ()}) // task-5 queue. push (function () {var defer = $. deferred (); setTimeo Ut (function () {defer. resolve () }, 2000); return defer. promise ()}) // task-6 queue. push (function () {var defer = $. deferred (); setTimeout (function () {defer. resolve () }, 2000); return defer. promise ()}) copy the code. The console displays queue. after the push function (temporarily called a task) is instantiated by a process, all three threads in the queue are idle and task-1 is allocated to thread 1, this task takes 8 s to allocate task-2 to thread 2. This task takes 2 s to allocate task-3 to thread 3. This task takes 6 s because there is no idle process currently, in the queue, add task-4, task-5, and task-6 to the waiting area because task- 2 takes 2 s. process 2 is liberated first, and task-4 is assigned to process 2, and so on. The process usage shown on the console is as follows: the application scenarios of the Library 1, 2, 3, 2, 3 are as follows: 1. For my recent project: the broadcaster is broadcasting live, and many viewers will present gifts to the broadcaster, these gifts all have js animation effects, and the page can display up to three gift effects at the same time. 2. asynchronous requests that depend on each other, a requests depend on B requests, and B requests depend on c requests, c request dependency... We can use this library to implement this requirement: copy the code var queue = new Queue (1); // request cqueue. push (function () {return $. ajax (); // The jq ajax returns exactly the promise object}) // request bqueue. push (function () {return $. ajax () ;}) // request aqueue. push (function () {return $. ajax () ;}) copies the code queue. push (callback) callback must return a promise object