Question

我有一个for循环，它应该用计数器更新div。

代码如下所示：

for(var i=0; i < $this.files.length; i++) {
    var update = setInterval(function() {
        $(".counter").html('<p>Processing file ' + (i+1) + ' of ' + $this.files.length + '.</p>')
    },1000);
//do other stuff
}

但是它没有更新。

我做错了什么？

Answer 1

问题在于，在循环时，您只需定义$this.files.length个不同的间隔，这些间隔将永远每秒都有效。

请改为尝试：

var len = $this.files.length;
var i = 0;
var update = setInterval(function() {
    $(".counter").html('<p>Processing file ' + (i+1) + ' of ' + len + '.</p>');
    if (++i == len) clearInterval(update);
},1000);

jsFiddle Demo

Answer 2

它不会起作用，只是因为你快速循环使用非常快速并设置了几个很快就会过期的定时器，这意味着人眼只会看到最后一个值，因此你需要制作带有计时器的循环函数，可以获得所需的结果：

function update_progress(cur, max){
 setTimeout(function() {
  $(".counter").html('<p>Processing file ' + cur + ' of ' +max + '.</p>');
  if (cur<max) {cur++; update_progress(cur,max);}
  },1000);
//do other stuff
}

update_progress(1, $this.files.length);

我希望你现在看到你的过程中的缺陷，我希望这会对你有所帮助。埃米尔

在for循环中更新div

2 个答案: