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

資料結構與演算法JavaScript (二) 隊列
隊列是只允許在一端進行插入操作，另一個進行刪除操作的線性表，隊列是一種先進先出（First-In-First-Out，FIFO）的資料結構 隊列在程式程式設計中用的非常的頻繁，因為javascript單線程，所以導致了任何一個時間段只能執行一個任務，而且還參雜了非同步機制， 那麼帶來的問題： 1. 在非同步作業執行的時候，同步代碼還在繼續，那麼同步代碼依賴非同步，自然就會出錯 2. 多個同步的任務在不同的時間段被調用   jQuery的動畫中，我們經常寫一段連續的動畫代碼 $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()方法則可刪除數組的第一個元素。 複製代碼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，使用隊列實現一個動畫  <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;}()); //domvar oDiv = document.getElementById('div1'); //調用oDiv.onclick = function() {    $('#div1').run({        'width': '500'    }).run({        'width': '300'    }).run({        'width': '1000'    });};