JavaScript异步编程原理.docVIP

众所周知，JavaScript 的执行环境是单线程的，所谓的单线程就是一次只能完成一个任务，其任务的调度方式就是排队，这就和火车站洗手间门口的等待一样，前面的那个人没有搞定，你就只能站在后面排队等着。在事件队列中加一个延时，这样的问题便可以得到缓解。 A: 嘿，哥们儿，快点！ B: 我要三分钟，你先等着，完了叫你~ A: 好的，记得叫我啊~ 你（C）也等着吧，完了叫你~ C: 嗯！ ... 告诉后面排队的人一个准确的时间，这样后面的人就可以利用这段时间去干点别的事情，而不是所有的人都排在队列后抱怨。我写了一段程序来解决这个问题： /** * @author Barret Lee * @email barret.china@ * @description 事件队列管理，含延时 */ var Q = { // 保存队列信息 a: [], // 添加到队列 queue q: function(d){ // 添加到队列如果不是函数或者数字则不处理 if(!/function|number/.test(typeof d)) return; Q.a.push(d); // 返回对自身的引用 return Q; }, // 执行队列 dequeue d: function(){ var s = Q.a.shift(); // 如果已经到了队列尽头则返回 if(!s) return; // 如果是函数，直接执行，然后继续 dequeue if(typeof s === function) { s(), Q.d(); return; } // 如果是数字，该数字作为延迟时间，延迟 dequeue setTimeout(function(){ Q.d(); }, s); } }; 这段程序加了很多注释，相信有 JS 基础的童鞋都能够看懂，利用上面这段代码测试下： // 进程记录函数 function record(s){ var div = document.createElement(div); div.innerHTML = s; console.log(s); document.body.appendChild(div); } Q .q(function(){ record(0 i style=color:blue3s 之后搞定，0 把 1 叫进来/i); }) .q(3000) // 延时 3s .q(function(){ record(1 i style=color:blue2s 之后搞定，1 把 2 叫进来/i); }) .q(2000) // 延时 2s .q(function(){ record(2 span style=color:red后面没人了，OK，厕所关门~/span); }) .d(); // 执行队列 可以戳戳这个 DEMO。也可以直接运行这段程序： /** * @author Barret Lee * @email barret.china@ * @description 事件队列管理，含延时 */ var Q = { // 保存队列信息 a: [], // 添加到队列 queue q: function(d){ // 添加到队列如果不是函数或者数字则不处理 if(!/function|number/.test(typeof d)) return; Q.a.push(d); // 返回对自身的引用 return Q; }, // 执行队列 dequeue d: function(){ var s = Q.a.shift(); // 如果已经到了队列尽头则返回 if(!s) return; // 如果是函数，直接执行，然后继续 dequeue if(typeof s === function) { s(), Q.d(); return; } // 如果是数字，该数字作为延迟时间，延迟