成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

[js高手之路]javascript騰訊面試題學(xué)習(xí)封裝一個(gè)簡易的異步隊(duì)列

hzx / 2033人閱讀

摘要：這道的面試題，是這樣的，頁面上有一個(gè)按鈕，一個(gè)，點(diǎn)擊按鈕的時(shí)候，每隔秒鐘向的后面追加一個(gè)一共追加個(gè)，的內(nèi)容從開始技術(shù)，首先我們用閉包封裝一個(gè)創(chuàng)建元素的函數(shù)頁面上的個(gè)元素點(diǎn)我代碼點(diǎn)擊按鈕的時(shí)候，用回調(diào)函數(shù)嵌套方式，這里我加入個(gè)，就已經(jīng)快受不了

這道js的面試題，是這樣的，頁面上有一個(gè)按鈕，一個(gè)ul，點(diǎn)擊按鈕的時(shí)候，每隔1秒鐘向ul的后面追加一個(gè)li, 一共追加10個(gè)，li的內(nèi)容從0開始技術(shù)( 0, 1, 2, ....9 )，首先我們用閉包封裝一個(gè)創(chuàng)建li元素的函數(shù).

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個(gè)元素:



    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 }

    點(diǎn)擊按鈕的時(shí)候，用回調(diào)函數(shù)嵌套方式，這里我加入3個(gè)li，就已經(jīng)快受不了了，這就是javascript著名的回調(diào)地獄，那么在這里，我用循環(huán)簡化一下：

     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 }

    恩，確實(shí)簡化了，但是這種面向過程的方式，耦合性太強(qiáng)，下面呢，我就把這個(gè)封裝成一個(gè)通用隊(duì)列

    第一步：封裝一個(gè)隊(duì)列，包含（ 入列，出列），隊(duì)列的特點(diǎn)（先進(jìn)先出，如果你不懂這個(gè)，需要去補(bǔ)下基本的數(shù)據(jù)結(jié)構(gòu)與算法內(nèi)容）

    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 }

    第二步、雖然我們現(xiàn)在實(shí)現(xiàn)了一個(gè)隊(duì)列，但是，這玩意是同步的，接下來繼續(xù)改造成異步的：

     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();
第三步、這樣就實(shí)現(xiàn)了一個(gè)異步隊(duì)列， 這里有個(gè)小東西要注意下，把this保存下來，因?yàn)槎〞r(shí)器的this指向的是window.另外在封裝deQueue(出列)函數(shù)時(shí)，一定要給個(gè)空函數(shù)，否則出列完了之后，會(huì)報(bào)錯(cuò)，但是這玩意還是有耦合性，繼續(xù)改造：

 1 
 2 
      
 3

      這樣封裝之后，我們的異步隊(duì)列就變得通用一點(diǎn)了，把延時(shí)和業(yè)務(wù)邏輯分開處理

      文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

      轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/88477.html

      相關(guān)文章

      • 前端知識點(diǎn)整理

        摘要：難怪超過三分之一的開發(fā)人員工作需要一些知識。但是隨著行業(yè)的飽和，初中級前端就業(yè)形勢不容樂觀。整個(gè)系列的文章大概有篇左右，從我是如何成為一個(gè)前端工程師，到各種前端框架的知識。 為什么 call 比 apply 快？ 這是一個(gè)非常有意思的問題。 作者會(huì)在參數(shù)為3個(gè)（包含3）以內(nèi)時(shí)，優(yōu)先使用 call 方法進(jìn)行事件的處理。而當(dāng)參數(shù)過多（多余3個(gè)）時(shí)，才考慮使用 apply 方法。 這個(gè)的原因...

        Lowky 評論0 收藏0

      • 前端知識點(diǎn)整理

        摘要：難怪超過三分之一的開發(fā)人員工作需要一些知識。但是隨著行業(yè)的飽和，初中級前端就業(yè)形勢不容樂觀。整個(gè)系列的文章大概有篇左右，從我是如何成為一個(gè)前端工程師，到各種前端框架的知識。 為什么 call 比 apply 快？ 這是一個(gè)非常有意思的問題。 作者會(huì)在參數(shù)為3個(gè)（包含3）以內(nèi)時(shí)，優(yōu)先使用 call 方法進(jìn)行事件的處理。而當(dāng)參數(shù)過多（多余3個(gè)）時(shí)，才考慮使用 apply 方法。 這個(gè)的原因...

        snowLu 評論0 收藏0

      • 設(shè)計(jì)模式（通往高手之路的必備技能）

        摘要：設(shè)計(jì)模式的定義在面向?qū)ο筌浖O(shè)計(jì)過程中針對特定問題的簡潔而優(yōu)雅的解決方案。從前由于使用的局限性，和做的應(yīng)用相對簡單，不被重視，就更談不上設(shè)計(jì)模式的問題。 ‘從大處著眼，從小處著手’，以前對這句話一知半解，自從踏出校門走入社會(huì)，開始工作以來，有了越來越深的理解，偶有發(fā)現(xiàn)這句話用在程序開發(fā)中也有用，所以，近段時(shí)間開始嘗試著分析jQuery源碼，分析angularjs源碼，學(xué)習(xí)設(shè)計(jì)模式。 設(shè)...

        paraller 評論0 收藏0

      • 2017年1月前端月報(bào)

        摘要：平日學(xué)習(xí)接觸過的網(wǎng)站積累，以每月的形式發(fā)布。年以前看這個(gè)網(wǎng)址概況在線地址前端開發(fā)群月報(bào)提交原則技術(shù)文章新的為主。 平日學(xué)習(xí)接觸過的網(wǎng)站積累，以每月的形式發(fā)布。2017年以前看這個(gè)網(wǎng)址：http://www.kancloud.cn/jsfron... 概況 在線地址：http://www.kancloud.cn/jsfront/month/82796 JS前端開發(fā)群月報(bào) 提交原則： 技...

        FuisonDesign 評論0 收藏0

      發(fā)表評論

      0條評論

      hzx

      男|高級講師

      TA的文章

      閱讀更多
      最新活動(dòng)
      閱讀需要支付1元查看
      <