使用隊列控制多個請求訪問一個異步方法

時間 2019-11-09

標籤使用隊列控制多個請求訪問一個異步方法简体版

原文原文鏈接

　　以前在項目進入測試階段的時候，測試部給發了一個bug，大體是在搜索的時候搜索出來的東西和實際的不符合。ajax

　　因而我去翻代碼，原來問題是搜索的時候每次鍵盤按下都會進行一次搜索，可是搜索時間是異步的，這就致使了上一次搜索還沒結束下一次搜索就有開始了。代碼的執行就想是一鍋粥，亂成一團。搜索的結果天然是不可能準確的了。數組

　　事實上，異步代碼一旦調用頻繁後，要麼回調滿地圖跑，要麼這些代碼不要求有前後，規律。我見過一些代碼，全部的請求都用異步，有時候兩三個方法同時請求一個方法的時候，就會出現變量賦值錯誤，代碼執行混亂等問題。。。。話題扯遠了，回到搜索的問題，若是要處理這種問題該怎麼辦呢？我一直思考，都沒有想出什麼好辦法。異步

　　這時候就體現出了，經驗與知識的重要性。我遍尋無果後，便去問了同事和經理，通過他們的指導，算是有了一些頭緒。學習

　　使用隊列來控制搜索的次數與條件。測試

            //隊列
            Queue:function(){
                var arr = [];
                //入隊
                this.push = function (item) {
                    arr.push(item);
                    return true;
                };
                //出隊
                this.shift = function () {
                    return arr.shift();
                };
                //獲取隊首
                this.getHead = function () {
                    return arr[0];
                };
                //獲取隊尾
                this.getTail = function () {
                    return arr[arr.length - 1];
                };
                //刪除數組固定位
                this.splice = function (start,end) {
                    arr.splice(start, end);
                };
                //清空數組
                this.clear = function () {
                     arr=[];
                };
                //獲取數組長度
                this.getLength = function () {
                    return arr.length;
                };
            }

　　搜索的時候，按鈕第一次被按下時，將搜索條件push到隊列裏，並調用搜索方法。非第一次直接就push到隊列裏。this

　　搜索方法執行時，先取隊尾的搜索條件，校驗，將搜索條件附加到參數中。在成功返回的回調中獲取當前隊列的長度，若是隊列長度大於1，刪除除了隊尾的其他搜索條件，並遞歸執行搜索方法，不然就清空隊列。每次執行都會只剩下隊尾的一個或空，直到沒有再按下搜索條件，遞歸纔會終止。spa

     var queue=new Queue();
     //搜索點擊
     function onSearchClick(key){         
         if(queue.getLength==0){
            queue.push(key);
            search()
         }else{
            queue.push(key); 
         }
     }
     //搜索
     function search(){
         //獲取隊尾
         var key=queue.getTail();
         if(!key){
             $.ajax({
                ....
                data:{searchKey:key},//賦值搜索條件
                ....
                success:function(result){
                    var length=queue.getLength();
                    if(length>1){
                        //清空除隊尾的其他條件
                        queue.splice(0,length);
                        //遞歸調用
                        search();
                    }else{
                        //清空隊列
                        queue.clear();
                    }                    
                },             
            })
         }
     }
     
    //隊列
    Queue:function(){
        var arr = [];
        //入隊
        this.push = function (item) {
            arr.push(item);
            return true;
        };
        //出隊
        this.shift = function () {
            return arr.shift();
        };
        //獲取隊首
        this.getHead = function () {
            return arr[0];
        };
        //獲取隊尾
        this.getTail = function () {
            return arr[arr.length - 1];
        };
        //刪除數組固定位
        this.splice = function (start,end) {
            arr.splice(start, end);
        };
        //清空數組
        this.clear = function () {
            arr=[];
        };
        //獲取數組長度
        this.getLength = function () {
            return arr.length;
        };
    }