JavaScript中資料結構與演算法(二):隊列

來源:互聯網
上載者:User

   這篇文章主要介紹了JavaScript中資料結構與演算法(二):隊列,隊列是只允許在一端進行插入操作,另一個進行刪除操作的線性表,隊列是一種先進先出(First-In-First-Out,FIFO)的資料結構,需要的朋友可以參考下

  隊列是只允許在一端進行插入操作,另一個進行刪除操作的線性表,隊列是一種先進先出(First-In-First-Out,FIFO)的資料結構

  隊列在程式程式設計中用的非常的頻繁,因為javascript單線程,所以導致了任何一個時間段只能執行一個任務,而且還參雜了非同步機制,

  那麼帶來的問題:

  1. 在非同步作業執行的時候,同步代碼還在繼續,那麼同步代碼依賴非同步,自然就會出錯

  2. 多個同步的任務在不同的時間段被調用

  jQuery的動畫中,我們經常寫一段連續的動畫代碼

  ?

1 2 3 4 5 6 7 $book.animate({ opacity: 0.25, }).animate({ opacity: 0.5 }).animate({ opacity: 1 })

  給我們的直觀感覺就是:第一個animate結束後元素的opacity變成0.25,然後開始繼續執行第二個animate,元素的opacity變成0.5, 之後類推。但是實際上來說這裡就設計了一個本質的問題,動畫可是非同步呼叫的,animate方法是同步在執行的,所以這裡就需要設計到隊列,jQuery也給出了一個專門為動畫設計的queue方法

  隊列本來也是一種特殊的線性表,在JavaScript我們可以直接使用數組實現這樣的一個設計,數組的push()方法可以在數組末尾加入元素,shift()方法則可刪除數組的第一個元素。

  ?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 function Queue() { this.dataStore = []; this.enqueue = enqueue; this.dequeue = dequeue; this.first = first; this.end = end; this.toString = toString; this.empty = empty; }   /////////////////////////// // enqueue()方法向隊尾添加一個元素: // /////////////////////////// function enqueue(element) { this.dataStore.push(element); }   ///////////////////////// // dequeue()方法刪除隊首的元素: // ///////////////////////// function dequeue() { return this.dataStore.shift(); }   ///////////////////////// // 可以使用如下方法讀取隊首和隊尾的元素: // ///////////////////////// function first() { return this.dataStore[0]; }   function end() { return this.dataStore[this.dataStore.length - 1]; }   ///////////////////////////// // toString()方法顯示隊列內的所有元素 // ///////////////////////////// function toString() { var retStr = ""; for (var i = 0; i < this.dataStore.length; ++i) { retStr += this.dataStore[i] + "n"; } return retStr; }   //////////////////////// // 需要一個方法判斷隊列是否為空白 // //////////////////////// function empty() { if (this.dataStore.length == 0) { return true; } else { return false; } }   var q = new Queue(); q.enqueue("Aaron1"); q.enqueue("Aaron2"); q.enqueue("Aaron3");   console.log("隊列頭: " + q.first()); //("Aaron1"); console.log("隊列尾: " + q.end()); //("Aaron3");

  隊列採用的是線性儲存,那麼就存在著順序儲存的一些弊端,比如排隊買票,如果第一個買好了,後面的就會自然的往前移動一個空位,這樣涉及到整個隊列的每一個成員都要往前移動,不過JavaScript的隊列是用數組描述的,底層解決了些弊端了。當然還有尋找演算法上的問題,比如可以用數組實現單鏈表結構等等,我們這裡只討論javascript的隊列

  類比jQuery,使用隊列實現一個動畫

  ?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 <div id="div1" style="width:100px;height:50px;background:red;cursor:pointer;color:#fff;text-align:center;line-height:50px;">點擊</div>   (function($) {   window.$ = $;   })(function() {   var rquickExpr = /^(?:#([w-]*))$/;   function aQuery(selector) { return new aQuery.fn.init(selector); }   /** * 動畫 * @return {[type]} [description] */ var animation = function() { var self = {}; var Queue = []; //動畫隊列 var fireing = false //動畫鎖 var first = true; //通過add介面觸發   var getStyle = function(obj, attr) { return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj, false)[attr]; }   var makeAnim = function(element, options, func) { var width = options.width //封裝了具體的執行演算法 //css3 //setTimeout element.style.webkitTransitionDuration = '2000ms'; element.style.webkitTransform = 'translate3d(' + width + 'px,0,0)';   //監聽動畫完結 element.addEventListener('webkitTransitionEnd', function() { func() }); }   var _fire = function() { //加入動畫正在觸發 if (!fireing) { var onceRun = Queue.shift(); if (onceRun) { fireing = true; //next onceRun(function() { fireing = false; _fire(); }); } else { fireing = true; } } }   return self = { //增加隊列 add: function(element, options) { Queue.push(function(func) { makeAnim(element, options, func); });   //如果有一個隊列立刻觸發動畫 if (first && Queue.length) { first = false; self.fire(); } }, //觸發 fire: function() { _fire(); } } }();     aQuery.fn = aQuery.prototype = { run: function(options) { animation.add(this.element, options); return this; } }   var init = aQuery.fn.init = function(selector) { var match = rquickExpr.exec(selector); var element = document.getElementById(match[1]) this.element = element; return this; }   init.prototype = aQuery.fn;   return aQuery; }());   //dom var oDiv = document.getElementById('div1');   //調用 oDiv.onclick = function() { $('#div1').run({ 'width': '500' }).run({ 'width': '300' }).run({ 'width': '1000' }); };

  測試

  ?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 <!doctype html><div id="div1" style="width:100px;height:50px;background:red;cursor:pointer;color:#fff;text-align:center;line-height:50px;" data-mce-style="width: 100px; height: 50px; background: red; cursor: pointer; color: #fff; text-align: center; line-height: 50px;">點擊</div><script type="text/javascript">   (function($) {   window.$ = $;   })(function() {   var rquickExpr = /^(?:#([w-]*))$/;   function aQuery(selector) { return new aQuery.fn.init(selector); }   /** * 動畫 * @return {[type]} [description] */ var animation = function() { var self = {}; var Queue = []; //動畫隊列 var fireing = false //動畫鎖 var first = true; //通過add介面觸發   var getStyle = function(obj, attr) { return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj, false)[attr]; }   var makeAnim = function(element, options, func) { var width = options.width //封裝了具體的執行演算法 //css3 //setTimeout element.style.webkitTransitionDuration = '2000ms'; element.style.webkitTransform = 'translate3d(' + width + 'px,0,0)';   //監聽動畫完結 element.addEventListener('webkitTransitionEnd', function() { func() }); }   var _fire = function() { //加入動畫正在觸發 if (!fireing) { var onceRun = Queue.shift(); if (onceRun) { fireing = true; //next onceRun(function() { fireing = false; _fire(); }); } else { fireing = true; } } }   return self = { //增加隊列 add: function(element, options) { Queue.push(function(func) { makeAnim(element, options, func); });   //如果有一個隊列立刻觸發動畫 if (first && Queue.length) { first = false; self.fire(); } }, //觸發 fire: function() { _fire(); } } }();     aQuery.fn = aQuery.prototype = { run: function(options) { animation.add(this.element, options); return this; } }   var init = aQuery.fn.init = function(selector) { var match = rquickExpr.exec(selector); var element = document.getElementById(match[1]) this.element = element; return this; }   init.prototype = aQuery.fn;   return aQuery; }());     //dom var oDiv = document.getElementById('div1');   //調用 oDiv.onclick = function() { $('#div1').run({ 'width': '500' }).run({ 'width': '300' }).run({ 'width': '1000' }); };   </script>
相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。