js 进度监控

忘是亡心i 2022-05-28 13:29 118阅读 0赞

今天做这个的时候遇到了点麻烦，发现在for循环中，处理数据完后，同步的执行dom更新操作，dom更新会滞后，会等待循环后再执行一次dom更新，这样就达不到进度监控的要求。

于是，我尝试了一些异步的方法，甚至vue的数据绑定(和dom是一样的)，甚至我还找了一个screenlog.min.js，可以将控制台的消息输出在界面，发现里面还是有dom操作，根本无法同步执行。还尝试了一些按钮点击刷新进度事件控制...，几乎所有想到的方法都尝试了遍，发现都达不到效果，根本达不到实时监控。

最后算是找到了一种比较可靠的方法：setInterval

var from=0;
        var end=50;
        var timer=setInterval(()=>{
          if(end>textsArr.length){
            //清除定时器
            clearInterval(timer);  
            timer=null;
          }else{
            if(setFlag==1){
              var tmp_textsArr=textsArr.slice(from,end);
              for(var i=0;i<tmp_textsArr.length;i++){
                splitOne(tmp_textsArr[i]);
              }
              from=end;
              if(end==textsArr.length){
                end+=10;
              }else{
                if(textsArr.length-end+1>=50){
                  end=from+50;
                }else{
                  end=textsArr.length;
                }
              }
              setFlag=2;
              console.log(end,textsArr.length);
              console.log("11111111");
            }else if(setFlag==1.5){
              //nothing
              console.log("2222222");
            }else if(setFlag==2){
              getId("currCount").innerText=end;
              setFlag=1;
              console.log("3333333");
            }
          }
        },100);

每隔100ms监控一次，尽量模拟实时的效果(肉眼难以识别)，当一批数据被处理后(50条数据)，就更改标志值，这样在100ms后，就去执行dom操作的，让数据处理和更新dom两个操作在不同的时间中执行。虽然不是真正意义的同步，但是几乎同步，达到了要求。

发表评论取消回复

表情：

评论列表（有 0 条评论，118人围观）

还没有评论，来说两句吧...

相关阅读

相关 javascript进度条（js实例）

利用javascript模拟下载进度条，可以防止重复点击。 > 思路：用两个div嵌套，开始时，初始时里面的div宽度为0，当点击下载时，让里面的div宽度一直+1，当加到1

Myth丶恋晨/ 2023年01月17日 03:23/ 0 赞/ 164 阅读

相关 php ajax formdata 进度,FormData+Ajax实现上传进度监控

FormData类型其实是在XMLHttpRequest 2级定义的，它是为序列化表以及创建与表单格式相同的数据(当然是用于XHR传输)提供便利。接下来通过本文给大家分享For

妖狐艹你老母/ 2022年11月12日 09:40/ 0 赞/ 257 阅读

相关 oracle 监控任务进度,有什么方法可以监控MV创建进度

是的 v$session\_longops只能监控MV的查询子句执行的进度 Session A: SQL> analyze table mvtest compute st

客官°小女子只卖身不卖艺/ 2022年10月21日 12:53/ 0 赞/ 22 阅读

相关 php js 动态进度条

<?php //注意，如果是安全模式，请不要打开，如果不是安全模式，这个选项可以打开 //set\_time\_limit(0); for ($i = 0; $i < 500;

缺乏、安全感/ 2022年07月12日 08:37/ 0 赞/ 242 阅读

相关 css+js 进度条 .

<html> <head> <title>简单的进度条</title> <mce:style type="text/css"><!-- \ProgressBar

た入场券/ 2022年06月18日 05:48/ 0 赞/ 252 阅读

相关 JS实现进度条

超时函数控制，每隔一秒钟就会执行指定的超时函数，再指定的超时函数里设置进度条的标签的长度，即可完成进度条的显示。 <!DOCTYPE html> <html>

约定不等于承诺〃/ 2022年06月09日 03:24/ 0 赞/ 328 阅读

相关 js 进度监控

今天做这个的时候遇到了点麻烦，发现在for循环中，处理数据完后，同步的执行dom更新操作，dom更新会滞后，会等待循环后再执行一次dom更新，这样就达不到进度监控的要求。于

忘是亡心i/ 2022年05月28日 13:29/ 0 赞/ 119 阅读

相关阿里云 OSS监控上传进度

阿里云 OSS监控上传进度 [阿里云上传进度SDK][SDK] 使用阿里云带进度条的上传，然后将长传进度存入session // 带进度条的上传

迈不过友情╰/ 2022年05月14日 02:57/ 0 赞/ 427 阅读

相关 SpringBoot MultipartFile 监控上传文件进度

＃ SpringBoot MultipartFile监控上传文件进度>引用块内容 > 在一次项目中需要监控文件上传的进度。将进度监控到之后计算百分比，存入session中se

淩亂°似流年/ 2022年05月13日 06:48/ 0 赞/ 996 阅读

相关 js 错误监控

1.错误的分类即时运行错误：代码错误 (1) try...catch (2) window.onerror /addEventLis

╰半夏微凉°/ 2021年08月29日 17:51/ 0 赞/ 268 阅读