[js高手之路]javascript腾讯面试题学习封装一个简易的异步队列

时间:2022-01-27 20:11:17

这道js的面试题,是这样的,页面上有一个按钮,一个ul,点击按钮的时候,每隔1秒钟向ul的后面追加一个li, 一共追加10个,li的内容从0开始计数( 0, 1, 2, ....9 ),首先我们用闭包封装一个创建li元素的函数.

         var create = (function(){
var count = 0;
return function(){
var oLi = document.createElement( "li" );
oLi.innerHTML = count++;
return oLi;
}
})();

页面上的2个元素:

<input type="button" value="点我">
<ul id="box"></ul>
js代码:
 var oBtn = document.querySelector( "input" );
var oBox = document.querySelector( "#box" ); var create = (function(){
var count = 0;
return function(){
var oLi = document.createElement( "li" );
oLi.innerHTML = count++;
return oLi;
}
})(); oBtn.onclick = function(){
setTimeout(function(){
oBox.appendChild( create() );
setTimeout( function(){
oBox.appendChild( create() );
setTimeout( function(){
oBox.appendChild( create() );
}, 1000 );
}, 1000 );
}, 1000 );
}

点击按钮的时候,用回调函数嵌套方式,这里我加入3个li,就已经快受不了了,这就是javascript著名的回调地狱,那么在这里,我用循环简化一下:

 var oBtn = document.querySelector("input");
var oBox = document.querySelector("#box");
var timer = oNode = null;
var create = (function () {
var count = 0;
return function () {
var oLi = document.createElement("li");
oLi.innerHTML = count++;
return oLi;
}
})();
function add(){
oNode = oBox.appendChild( create() );
if ( oNode.innerHTML < 9 ) {
timer = setTimeout( add, 1000 );
}else {
clearTimeout( timer );
}
}
oBtn.onclick = function () {
add();
}

恩,确实简化了,但是这种面向过程的方式,耦合性太强,下面呢,我就把这个封装成一个通用队列

第一步:封装一个队列,包含( 入列,出列),队列的特点(先进先出,如果你不懂这个,需要去补下基本的数据结构与算法内容)

 var Queue = function () {
this.list = []
}
Queue.prototype = {
constructor: Queue,
enQueue: function ( fn ) {
this.list.push( fn );
return this;
},
deQueue: function () {
var fn = this.list.shift() || function () {};
fn.apply( this, arguments );
}
}

我们来使用它:

 var oQ = new Queue();
oQ.enQueue( function(){
console.log( 'ghostwu1' );
}).enQueue( function(){
console.log( 'ghostwu2' );
}).enQueue( function(){
console.log( 'ghostwu3' );
}).deQueue();
while( oQ.list.length ){
oQ.deQueue();
}

第二步、虽然我们现在实现了一个队列,但是,这玩意是同步的,接下来继续改造成异步的:

 var oQ = new Queue();
oQ.enQueue( function(){
var _this = this;
console.log( 'ghostwu1' );
setTimeout( function(){ _this.deQueue(); }, 1000 );
}).enQueue( function(){
var _this = this;
console.log( 'ghostwu2' );
setTimeout( function(){ _this.deQueue(); }, 1000 );
}).enQueue( function(){
var _this = this;
console.log( 'ghostwu3' );
setTimeout( function(){ _this.deQueue(); }, 1000 );
}).deQueue();

第三步、这样就实现了一个异步队列, 这里有个小东西要注意下,把this保存下来,因为定时器的this指向的是window.另外在封装deQueue(出列)函数时,一定要给个空函数,否则出列完了之后,会报错,但是这玩意还是有耦合性,继续改造:

 <input type="button" value="点我">
<ul id="box"></ul>
<script>
var Utils = {
isFunction: function (a) {
return Object.prototype.toString.call(a) === '[object Function]';
},
isNumber: function (a) {
return typeof a === 'number';
}
};
var Queue = function () {
this.list = []
}
Queue.prototype = {
constructor: Queue,
enQueue: function (fn) {
this.list.push(fn);
return this;
},
delay: function (time) {
this.list.push(time);
return this;
},
deQueue: function () {
var _this = this;
var cur = this.list.shift() || function () { };
if (Utils.isFunction(cur)) {
cur.apply(_this, arguments);
if (_this.list.length) _this.deQueue();
} else if (Utils.isNumber(cur)) {
setTimeout(function () {
_this.deQueue();
}, cur);
}
}
} var oBtn = document.querySelector("input");
var oBox = document.querySelector("#box");
var create = (function () {
var count = 0;
return function () {
var oLi = document.createElement("li");
oLi.innerHTML = count++;
return oLi;
}
})();
oBtn.onclick = function () {
var oQ = new Queue();
function add() {
for (var i = 0; i < 10; i++) {
oQ.enQueue(function () {
oBox.appendChild(create());
}).delay(1000);
}
}
add();
oQ.deQueue();
}
</script>

这样封装之后,我们的异步队列就变得通用一点了,把延时和业务逻辑分开处理