vue中打印显示++的问题解决方案（做成类似同步的操作就行了）

这个问题，困扰我很久很久

 

怎么实现的呢？首先进入页面就开始调取打印接口，打印接口的成功回调函数里面写

this.hasOut++（这是实时显示的数量）
this.width=(this.hasOut/this.totalNumber)*100+ '%'（这是进度条的宽度）

然后去写watch 监听这个数量的变化（这个hasOut实在data中什么了的）

watch: {
          hasOut(val) {
            if(val<localStorage.getItem('buyNumber')){
              this.$nextTick(() => {
                this.testPrint(val)//这是打印函数
              });
            }else {
　　　　　　　　　　//跳转到首页（打印完之后）
                  this.$router.push({
                    name:'index',
                  })
            }
          }

但是上面这么写，不能实现打印的票数实时变化，直到打印完了之后，页面才会显示已打印 10张（假如买了10张）

 

这个怎么办呢？

直接来核心代码，加入了setTimeOut

if(bb==0||bb==8){
//                0  8 代表打印成功
              setTimeout(()=>{
                this.hasOut++
                this.width=(this.hasOut/this.totalNumber)*100+ '%'
              },0)
            }

watch也要写  不然hasOut变化太快，有时候就不会实时变化，它会跳过 比如打印1张直接跳转到3张中间的2没显示

  watch: {
          hasOut(val) {
            if(val<localStorage.getItem('buyNumber')){
　　　　　　　　　　
                setTimeout(()=>{
                  this.$nextTick(() => {
                    this.testPrint(val)
                  });
                },0)
            }else {
//这里也写timeout是因为 不写的话 比如你买10张，它只会显示已打印9张，进度条也是90% 然后就直接跳首页了
                setTimeout(()=>{
                  this.$router.push({
                    name:'index',
                  })
                },1500)

            }
          }
    },

 

综上所述，小知识--》就是你setTimeout设置为0，其实不起作用，因为浏览器js执行有个最小时间间隔，每个浏览器不通，一般都是15毫秒左右，有低的也有高的，差不多就这个值。

理一下思路，进入页面--》打印接口--》成功--》setTimeout--》0秒后（其实是15毫秒后，不通浏览器时间间隔不通）数量++--》watch监听到数量变化--》0秒（15ms）后，调取打印接口--》循环。

说白了就相当于同步了；任务队列显示打印成功回调的setTimeout,这个++执行后，watch监听到小于buyNumber，然后setTimeout 调取打印接口，然后循环，为啥watch中要写setTimeout呢，因为任务队列啊，写了就会去排队，不写的话，它就有可能插队，写了就能保证这个任务队列是处于同步的状态啊-------》哈哈哈哈哈这么写你理解了涩

JavaScript引擎是单线程运行的,浏览器无论在什么时候都只且只有一个线程在运行JavaScript程序.浏览器内核实现允许多个线程异步执行,这些线程在内核制控下相互配合以保持同步
如果队列非空,引擎就从队列头取出一个任务,直到该任务处理完,即返回后引擎接着运行下一个任务,在任务没返回前队列中的其它任务是没法被执行的.

 

转载于:https://www.cnblogs.com/myfirstboke/p/10239222.html