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

hzx 发布于2019-08-21 16:23 / 1879人阅读

摘要：这道的面试题，是这样的，页面上有一个按钮，一个，点击按钮的时候，每隔秒钟向的后面追加一个一共追加个，的内容从开始技术，首先我们用闭包封装一个创建元素的函数页面上的个元素点我代码点击按钮的时候，用回调函数嵌套方式，这里我加入个，就已经快受不了

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

1         var create = (function(){
2             var count = 0;
3             return function(){
4                 var oLi = document.createElement( "li" );
5                 oLi.innerHTML = count++;
6                 return oLi;
7             }
8         })();

页面上的2个元素:

js代码：

 1 var oBtn = document.querySelector( "input" );
 2 var oBox = document.querySelector( "#box" );
 3 
 4 var create = (function(){
 5     var count = 0;
 6     return function(){
 7         var oLi = document.createElement( "li" );
 8         oLi.innerHTML = count++;
 9         return oLi;
10     }
11 })();

12 
13 oBtn.onclick = function(){
14     setTimeout(function(){
15         oBox.appendChild( create() );
16         setTimeout( function(){
17             oBox.appendChild( create() );
18             setTimeout( function(){
19                 oBox.appendChild( create() );
20             }, 1000 );
21         }, 1000 );
22     }, 1000 );
23 }

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

 1 var oBtn = document.querySelector("input");
 2 var oBox = document.querySelector("#box");
 3 var timer = oNode =  null;
 4 var create = (function () {
 5     var count = 0;
 6     return function () {
 7         var oLi = document.createElement("li");
 8         oLi.innerHTML = count++;
 9         return oLi;
10     }
11 })();
12 function add(){
13     oNode = oBox.appendChild( create() );
14     if ( oNode.innerHTML < 9 ) {
15         timer = setTimeout( add, 1000 );
16     }else {
17         clearTimeout( timer );
18     }
19 }
20 oBtn.onclick = function () {
21     add();
22 }

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

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

1 var Queue = function () {
 2     this.list = []
 3 }
 4 Queue.prototype = {
 5     constructor: Queue,
 6     enQueue: function ( fn ) {
 7         this.list.push( fn );
 8         return this;
 9     },
10     deQueue: function () {
11         var fn = this.list.shift() || function () {};
12         fn.apply( this, arguments );
13     }
14 }

我们来使用它：

1 var oQ = new Queue();
 2 oQ.enQueue( function(){
 3     console.log( "ghostwu1" );
 4 }).enQueue( function(){
 5     console.log( "ghostwu2" );
 6 }).enQueue( function(){
 7     console.log( "ghostwu3" );
 8 }).deQueue();
 9 while( oQ.list.length ){
10     oQ.deQueue();
11 }

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

 1 var oQ = new Queue();
 2 oQ.enQueue( function(){
 3     var _this = this;
 4     console.log( "ghostwu1" );
 5     setTimeout( function(){ _this.deQueue(); }, 1000 );
 6 }).enQueue( function(){
 7     var _this = this;
 8     console.log( "ghostwu2" );
 9     setTimeout( function(){ _this.deQueue(); }, 1000 );
10 }).enQueue( function(){
11     var _this = this;
12     console.log( "ghostwu3" );
13     setTimeout( function(){ _this.deQueue(); }, 1000 );
14 }).deQueue();
第三步、这样就实现了一个异步队列， 这里有个小东西要注意下，把this保存下来，因为定时器的this指向的是window.另外在封装deQueue(出列)函数时，一定要给个空函数，否则出列完了之后，会报错，但是这玩意还是有耦合性，继续改造：

 1 
 2 
 3

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

服务器托管超融合服务器栈和队列面试题 js的基础面试题 javascript必问面试题腾讯面试题　php

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/88477.html

前端知识点整理

摘要：难怪超过三分之一的开发人员工作需要一些知识。但是随着行业的饱和，初中级前端就业形势不容乐观。整个系列的文章大概有篇左右，从我是如何成为一个前端工程师，到各种前端框架的知识。为什么 call 比 apply 快？这是一个非常有意思的问题。作者会在参数为3个（包含3）以内时，优先使用 call 方法进行事件的处理。而当参数过多（多余3个）时，才考虑使用 apply 方法。这个的原因...

Lowky 2019-08-22 11:22 评论0 收藏0
前端知识点整理

摘要：难怪超过三分之一的开发人员工作需要一些知识。但是随着行业的饱和，初中级前端就业形势不容乐观。整个系列的文章大概有篇左右，从我是如何成为一个前端工程师，到各种前端框架的知识。为什么 call 比 apply 快？这是一个非常有意思的问题。作者会在参数为3个（包含3）以内时，优先使用 call 方法进行事件的处理。而当参数过多（多余3个）时，才考虑使用 apply 方法。这个的原因...

snowLu 2019-08-29 14:05 评论0 收藏0
设计模式（通往高手之路的必备技能）

摘要：设计模式的定义在面向对象软件设计过程中针对特定问题的简洁而优雅的解决方案。从前由于使用的局限性，和做的应用相对简单，不被重视，就更谈不上设计模式的问题。 ‘从大处着眼，从小处着手’，以前对这句话一知半解，自从踏出校门走入社会，开始工作以来，有了越来越深的理解，偶有发现这句话用在程序开发中也有用，所以，近段时间开始尝试着分析jQuery源码，分析angularjs源码，学习设计模式。设...

paraller 2019-08-21 18:35 评论0 收藏0
2017年1月前端月报

摘要：平日学习接触过的网站积累，以每月的形式发布。年以前看这个网址概况在线地址前端开发群月报提交原则技术文章新的为主。平日学习接触过的网站积累，以每月的形式发布。2017年以前看这个网址：http://www.kancloud.cn/jsfron... 概况在线地址：http://www.kancloud.cn/jsfront/month/82796 JS前端开发群月报提交原则：技...

FuisonDesign 2019-08-29 12:35 评论0 收藏0