Question

我有一个使用CSS制作的简单加载栏，您可以更新CSS并填充栏，非常简单。我决定使用jQuery更新该栏，效果很好，但现在我将其投入到实际环境中。我有一堆文件正在下载，每次文件成功下载时，它都会更新位置。主要问题是它下载文件的速度如此之快，并且放置得足够快，以至于除非我将超时间隔设置为300-400ms，否则它不会更新加载栏。间隔函数，它基于全局变量连续检查文件是否完成。无论我将函数放置在何处以更新加载栏或如何更新它，似乎Dom都不会做出反应，除非文件之间存在足够大的延迟，否则它最终将做出反应（跳至100）。

有什么方法可以等待J的Dom更新吗？还是可以在我的代码中发现导致此问题的问题？

我也尝试了promises，但是它没有改变浏览器对功能的反应。

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

文件传输功能也具有“成功”功能，但不会执行任何操作，因为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

我认为您遇到了变量 currPos 的情况。使用调试工具标记行并检查currPos的值。设法将代码的0跳转到articleSize。

Answer 2

每次下载完成时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.

有什么方法可以等待更新Dom或异步更新Dom？

2 个答案: