zoukankan      html  css  js  c++  java
  • js方法队列的一次实践

    场景:

    项目中有一个需求,发布故事线,发布会调用一个接口,改接口返回进度条的必要信息,进度信息由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();
            }

  • 相关阅读:
    【推荐】英国金融时报推荐的数据可视化图表分类图
    华为方舟编译器开源官网正式上线
    PyTorch官方教程中文版
    《一张图看懂华为云BigData Pro鲲鹏大数据解决方案》
    区块链学习笔记:DAY05 如何使用公有云区块链服务
    python一行写不下,变多行
    python 多窗口编辑
    ant的设置properties
    java的输出类
    python的IndentationError: unexpected indent python
  • 原文地址:https://www.cnblogs.com/fqh123/p/13913978.html
Copyright © 2011-2022 走看看