有没有办法等待Dom更新或异步更新Dom？

Question

我有一个用css制作的简单加载条，你更新了css和bar填充，超级简单。我决定用jQuery更新吧，效果很好，但现在把它扔进了实用的环境。我有一堆文件被下载，每次文件成功下载，它都会更新位置。主要的问题是它如此快速地下载文件，并正确地放置文件足够快，它只是不更新​​加载栏，除非我设置300-400ms的超时间隔..它确实登录到控制台，我做了一个interval函数，它根据全局变量不断检查文件是否已完成。无论我在哪里放置功能来更新加载栏或我如何更新它，似乎Dom不会做出反应，除非文件之间有足够大的延迟或者它会在最后做出反应（跳转到100）。

是否有任何方法可以等待由J更新Dom，或者您是否发现了导致此问题的代码问题？

我也尝试过promises，但它没有改变浏览器对函数的反应。

这一切都是在Cordova环境中完成的，但我也在chrome上进行了测试，只要PC看起来足够强大就能正常工作。

文件传输功能也有“成功”，但是没有做任何事情，因为Dom不会更新，直到所有下载完成或者有延迟

到目前为止，我的解决方案是故意滞后下载器，或者每10或20个文件滞后以更新位置

编辑：这是我的装载栏Js

  var colorInc = 100 / 3;
  function setWater(myval)
  {
   var val = myval;
var waitForMe = $.Deferred();
  if(val != ""
  && !isNaN(val)
  && val <= 100
  && val >= 0)
{
  setTimeout(function(){waitForMe.resolve()}, 100);
  var valOrig = val;
  val = 100 - val;

  if(valOrig == 0)
  {
    //$("#percent-box").val(0);
    $(".progress .percent").text(0 + "%");
  }
  else $(".progress .percent").text(valOrig + "%");

  $(".progress").parent().removeClass();
  $(".progress .water").css("top", val + "%");

  if(valOrig < colorInc * 1)
    $(".progress").parent().addClass("red");
  else if(valOrig < colorInc * 2)
    $(".progress").parent().addClass("orange");
  else
    $(".progress").parent().addClass("green");
}
else
{
  setTimeout(function(){waitForMe.resolve()}, 100);
  $(".progress").parent().removeClass();
  $(".progress").parent().addClass("green");
  $(".progress .water").css("top", 100 - 67 + "%");
  $(".progress .percent").text(67 + "%");
  //$("#percent-box").val("");
}
return waitForMe.promise();
   };

下载跟踪器：

 var DLProgress = null;
 function updateProgress() {
  var oldNum = 0;
  DLProgress = setInterval(function(){
    if(!doneArts) {
       doneArts = true;
   downloadHelper("Articles",articleSize,33.33,0);
   }else if(currPos >= totalSize - 1){
   clearInterval(DLProgress);
   goNews();
    currPos = 0;
   doneArticles = false;
    doneJson = false;
   doneArts = false;
   } else if(currPos >= articleSize && !doneArticles) {
    doneArticles = true;
   downloadHelper("json",jsonSize,33.33,33.33);
    } else if(currPos >= articleSize + jsonSize && !doneJson) {
    doneJson = true;
     downloadHelper("img",imgSize,33.33,66.66);
     }
      if(oldNum != currPos) {
      oldNum = currPos;
      setWater(Math.ceil(100 * currPos / totalSize));
     }
     },5);
    }

下载助手：

 function downloadHelper(name,size,maxPerc,startingPoint) {
 dataFiles[name].forEach(function(file){
   var getItem = localStorage.getItem(name+"/"+file[0]) || null; //might not work
   if(getItem === null || getItem !== file[1]) {
   //download file.
    if(file[0] !== null && file[1] !== null) {
      //setWater(Math.ceil(100 * currPos / totalSize)).done(function(){downloader(name+"/"+file[0],file[1]);});
      setTimeout(function(){downloader(name+"/"+file[0],file[1])},window.dltime);
      window.dltime += 200;
    }
   }
  });
 };

使用的文件传输：https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-file-transfer/

它在每个下载帮助程序完成后更新

是否有任何方法可以等待由J更新Dom，或者您是否发现了导致此问题的代码问题？

Answer 1

每次下载完成时都会更新DOM - 这可能是个问题。 我们应该分开上传进度和动画。下载文件时，您应该更改某种模型并递归使用requestAnimationFrame来为进度条设置动画。

requestAnimationFrame被称为60 times per second, but will generally match the display refresh rate, paused in most browsers when running in background tabs or hidden <iframe>s in order to improve performance and battery life.

Answer 2

我认为你有变量currPos的情况。使用调试工具标记行并检查currPos的值。不知何故，您的代码被设法将其跳转到articleSize。