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

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

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程序.浏览器内核实现允许多个线程异步执行,这些线程在内核制控下相互配合以保持同步
如果队列非空,引擎就从队列头取出一个任务,直到该任务处理完,即返回后引擎接着运行下一个任务,在任务没返回前队列中的其它任务是没法被执行的.

vue中打印显示++的问题解决方案(做成类似同步的操作就行了)的更多相关文章

  1. 【Vue】Vue中的父子组件通讯以及使用sync同步父子组件数据

    前言: 之前写过一篇文章<在不同场景下Vue组件间的数据交流>,但现在来看,其中关于“父子组件通信”的介绍仍有诸多缺漏或者不当之处, 正好这几天学习了关于用sync修饰符做父子组件数据双向 ...

  2. AndroidListview 滑动过程中图片显示重复错乱解决方案

    主要分析Android中Listview滚动过程造成的图片显示重复.错乱.闪烁的原因及解决方法,顺便跟进Listview的缓存机制. 1.原因分析 Listview item 缓存机制:为了使得性能更 ...

  3. PHP中json_encode后,在json字符串中依然显示中文的解决方案

    <?php header("Content-Type:text/html;charset=utf-8;"); $arr = array ('Version_code'=> ...

  4. vue中eslint报错的解决方案

    1,Newline required at end of file but not found. (eol-last) //文末需要一行 这个是报错: 这个是不报错的: 只需要在最后一行加上一空行即可 ...

  5. 在vue中选中某个标签,并且对其属性进行操作

    第一步:在标签中添加ref="111"属性 第二步:this.$refs.111.属性=""   此步骤是一111为标记选中了要操作的标签,通过点属性的方法,进 ...

  6. 当Vue中img的src是动态渲染时不显示问题

    最近遇见动态渲染img时,想起了当初刚开始写vue时,曾经遇见的一个小小坑. Vue中:img的src属性是动态渲染时不显示问题1.需求:展示用户头像,数据从后台获取,如果没有拿到则显示默认图片. 如 ...

  7. vue中使用vue-pdf插件显示pdf

    最近项目需求需要在vue中展示pdf,上网搜索了实现方法,找到vue-pdf这个插件非常好用,并且还有许多方法.属性能进行功能扩展. 一.安装 npm install --save vue-pdf 二 ...

  8. mvc 分部视图(Partial)显示登陆前后变化以及Shared文件夹在解决方案资源管理器中没有显示的问题

    刚开始我的解决方案资源管理器中没有显示Shared文件夹,但Shared文件夹在项目中是实际存在的,我搜了下好像没有类似的解答(可能是我搜索的关键词不够准确).后来自己看了下vs2012. 其实解决方 ...

  9. vue中el-upload上传多图片且携带参数,批量而不是一张一张的解决方案

    现在前端基本不是vue技术栈就是react技术栈. vue技术栈最常用的就是element-ui的ui框架了. 在项目中,我们经常会碰到这种需求:批量上传文件 element-ui 确实也为我们提供了 ...

随机推荐

  1. 架构师如何借鉴他人经验快速成长? | 2018GIAC上海站日程上线!

    随着网络技术的迅猛发展,越来越多的企业需要紧跟技术发展潮流以应对层出不穷的业务场景变化.如今多“语言”开发百花齐放,选择何种语言才能在合适的场景中发挥最大价值?互联网业务架构经过了长年的发展,已然朝着 ...

  2. 在VMware中使用Nat方式设置静态IP, 宿主机可以 ssh

    坑很多:  麻痹,  主要还是要先 防火墙关掉,永久关掉.  seliux 也永久关掉. 临时关闭防火墙:systemctl stop firewalld    开机不启动: systemctl di ...

  3. 两层LSTM的使用

    一层的lstm效果不是很好,使用两层的lstm,代码如下. with graph.as_default(): inputs_ = tf.placeholder(tf.int32, [None, seq ...

  4. Elasticsearch全文检索实战小结

    一.项目概述 这是一个被我称之为“没有枪.没有炮,硬着头皮自己造”的项目.项目是和其它公司合作的三个核心模块开发. 使用ES的目的是: 1).采集数据.网站数据清洗后存入ES: 2).对外提供精确检索 ...

  5. 10.11JAVA作业

    [实验任务一]:素数输出 1. 实验要求: (1)编写判断该数是否为素数的方法,并在主方法中对其进行调用. (2)注意编程规范:程序开头部分的目的,作者以及日期:必要的空格与缩进,适当的注释等: (3 ...

  6. 【魔改】hdu6325 多校赛3G xy排序凸包+llvector模板

    凸包算法前的预处理,可以极角排序,也可以按X,Y轴排序, 极角排序需要找到角落里的一个点,Xy轴排序要跑两遍凸包 而本题的要求只要一个上半凸包,并且有X轴从小到大以及字典序限制,完全符合xy排序,直接 ...

  7. 设置shell脚本静默方式输入密码方法

    stty命令是一个终端处理工具.我们可以通过它来实现静默方式输入密码,脚本如下 #!/bin/sh echo –e “enter password:” stty –echo               ...

  8. hyperledge vagrant docker development environment

    https://blog.csdn.net/zgljl2012/article/details/52896372

  9. 如何实现一个字符的反转 (Java)

    一..通过jdk自带reverse的方法.

  10. UOJ244 短路 贪心

    正解:贪心 解题报告: 传送门! 贪心真的都是些神仙题,,,以我的脑子可能是不存在自己想出解这种事情了QAQ 然后直接港这道题解法趴,,, 首先因为这个是对称的,所以显然的是可以画一条斜右上的对角线, ...