js 进度监控

今天做这个的时候遇到了点麻烦，发现在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两个操作在不同的时间中执行。虽然不是真正意义的同步，但是几乎同步，达到了要求。