我如何让Javascript for循环显示它已经循环的次数与实时计数

How can I take a Javascript for loop display the number of times it has looped with a live count?

本文关键字：循环 实时 Javascript 显示 for      更新时间：2023-09-26

我怎样才能让Javascript for循环显示它循环的次数?

for (var i = 0; i < 10; i ++) {
    [ DO FUNCTION HERE ]
    document.getElementsByTagName("span")[3].innerHTML = "Cycles: " + i;
}

我希望它显示"Cycles: #"，并在循环每个函数时使用# increment。类似于加载屏幕。想法吗?

这样如何:

var out = document.getElementsByTagName("span")[3];
var speed = 1;
var i = 0;
function loop() {
    out.innerHTML = "Cycles " + i;
    // do something
    if (++i < 10) {
        setTimeout(loop, speed);
    }
}
loop();

如果发生得太快而无法观察时间，只需增加speed。如果您将speed设置为100，您将看到计数器每秒增加大约10次，这取决于您的代码执行所需的时间。

这将每秒更新一次显示。

演示:

http://jsfiddle.net/Lb3Uc/

var span = document.getElementsByTagName("span")[3];
var i = 0;
(function looper() {
    if( i++ < 10 ) {
        span.innerHTML = "Cycles: " + i;
        setTimeout( looper, 1000);
    }
})();

每次looper函数运行时，只要i < 10在1000ms延迟后递归调用它自己。

这种异步代码是允许页面重绘所必需的。

在您的函数中，您不是在添加而是替换span的内容。使用+=操作符代替

http://jsfiddle.net/9wKQw/

for (var i = 0; i < 10; i ++) {
    document.getElementById("oput").innerHTML += "Cycles: " + i + "<br>";
}

您的for循环实际上正在做您希望它做的事情，但是javascript执行得如此之快，您直接进入最终循环的速度比您可以注意到它的变化快。试着将var i写入控制台，您就会明白我的意思。它在每个循环中打印，但看起来几乎是即时的，因为脚本没有花费任何时间来执行。

编辑:

根据你的请求，这里是你如何减慢你的应用程序，这样你就可以实现你的定时器…

var i = 0;
var interval = setInterval(
    function() { 
        /* add the rest of your method here */
        document.getElementsByTagName("span")[3].innerHTML = "Cycles: " + i;
        i++; 
        if(i > 10) { /* number of repetitions */
            clearInterval(interval);
        }
    },
1000); /* seconds delayed */

为了协调AJAX函数和进度更新视图，不要人为地降低函数调用的速度。首先，它会减少响应时间，这是用户不喜欢的。另一方面，进度会差一个。

相反，让AJAX函数调用一个函数，当AJAX调用成功或有条件地完成时更新进度，这取决于什么是合适的。

最后，您可能需要更改文档结构，这将需要更改获取进度元素的方式。相反，给进度元素一个ID，并使用getElementById。

var async_done = (function() {
    var doneCount = 0;
    return function () {
        ++doneCount;
        document.getElementById("Progress").innerHTML = "Cycles: " + doneCount;
    };
})();
for (var i = 0; i < 10; i ++) {
    async_function(async_done);
}
相关文章：