如何使用js在循环中显示相同的html元素的变化答案

【问题标题】：How to show a same html element's change in a loop with js如何使用js在循环中显示相同的html元素的变化
【发布时间】：2021-06-24 01:38:18
【问题描述】：

我想通过更改元素的文本来显示进度，如下所示：

for (i = 0; i < 1000; ++i)
{
    $('#progressing > #num').html(i + '/' + 1000);

    // do other things
    ...
}

但似乎资源管理器已经混合了元素的变化，我只能看到最后一个循环的结果。

我试过用setInterval，效果很好：

    setInterval(function(self) {
            $('#progressing > #num').html(self.progress + '/' + 1000);
            self.progress += 1;
    }, 1, this);

但我认为这并不酷。我可以要求一种优雅的方式来立即显示元素更改，就像 IO 中的刷新功能或其他方式一样？

【问题讨论】：

标签： javascript html jquery loops element

【解决方案1】：

不确定它有什么不“酷”的地方。如果它旨在衡量实际的下载进度，那么这不是这样做的方法。但对于通用计数器，它工作正常。请注意，如果您愿意，可以将代码减少到一行

let progress=0, max=1000, s=setInterval(()=>(progress++ > max-1 ? clearInterval(this) : $('#el').html(progress + '/' + max)),10);

let progress=0, max=1000, s=setInterval(()=&gt;(progress++ &gt; max-1 ? clearInterval(this) : $('#el').html(progress + '/' + max)),10);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='el'></div>

【讨论】：

【解决方案2】：

因为 for 循环运行得很快，所以事件只会在最终结果上引发。对于调试，我认为您需要记录控制台或使用间隔而不是 for 循环。

var counter = 0;
var myInterval = setInterval(function(){
    if(counter === 100){ //loop 100 times
        //stop loop (finished loop)
        clearInterval(myInterval);
    }else{
        counter ++;
        $('#progressing > #num').html(self.progress + '/' + 1000);
        //do your other code here
    }
}, 2000); //each time process 2 seconds

【讨论】：