。

場景：

專案中有一個需求，釋出故事線，釋出會呼叫一個介面，改介面返回進度條的必要資訊，進度資訊由mqtt推送過來，在正常網路情況下，介面返回速度應該比mqtt推送先一步完成，但是在網路慢的情況下，介面就遲於mqtt推送的速度。

（mqtt會推送多條訊息過來，執行多次）。這樣會造成進度條卡死的現象。

解決辦法：當有進度條例項時，直接執行進度條的方法，若沒有進度條例項時，將方法存到方法佇列內，待進度條例項建立時，執行佇列內的方法。完美解決mqtt後接口執行順序的問題。當然時機要把握好，我指的是執行佇列還是執行方法。看情況而定。

下面是一段程式碼：

storyPublishQueue.js

// 故事線釋出佇列
 

export function storyPublishQueue(){  
    let arr = [];  
        //入隊操作  
    this.push = function(element){  
        arr.push(element);  
        return true;  
    }  
        //出隊操作  
    this.pop = function(){  
        return arr.shift();  
    }  
        //獲取隊首  
    this.getFront = function(){  
        
 
return arr[0];  
    }  
        //獲取隊尾  
    this.getRear = function(){  
        return arr[arr.length - 1]  
    }  
        //清空佇列  
    this.clear = function(){  
        arr = [];  
    }  
        //獲取隊長  
    this.size = function(){  
        return arr.length;  
    }  
    // 執行故事線釋出佇列
    this.trigger = function
 
(){
        arr.forEach(item=>{
            item();
        })
        arr = [];//清空佇列
    }
}  

掛在到vue例項例項上：

import {storyPublishQueue} from '@/utils/storyPublishQueue.js';//故事線釋出佇列

Vue.prototype.storyPublishQueue = new storyPublishQueue();//建立一個釋出故事線佇列例項

mqtt返回訊息內呼叫：

          let vm = this;
          let queue = function(){
          // 為了處理 故事線頁面故事線釋出介面和mqtt返回時間順序問題 將以下程式碼放到訊息佇列內 無論介面和mqtt執行順序是怎麼樣的，都放在介面返回之後執行
            xxx
          }
          
          if(vm.$aiProgress.find ('storypush')){
            //如果存在了進度條彈窗例項，則執行
            queue()
          }else{
            // 如果不存在進度條例項 則加入佇列
            this.storyPublishQueue.push(queue);//加入訊息佇列
          }

介面內呼叫：

        Bus.$emit('storypush',{vm:this, storyPushTotal});//建立進度條例項
        if(this.storyPublishQueue.size()){
          // 如果訊息佇列內有佇列 代表mqtt先與介面返回了進度資訊，直接執行佇列
          this.storyPublishQueue.trigger();
        }

。