为什么这个 JavaScript 没有按预期运行

Question

    function animateGraph() {
    var graph;
    for(i=0; i<10; i++)
    {
        var start = new Date();
        while((new Date()) - start <= 500) {/*wait*/}
        document.getElementById("timeMark").innerHTML = phoneX[i].epoch;
    }
}

循环工作。等待有效。但是 document.getElement 直到数组中的最后一项才显示出来......为什么？

Answer 1

使用 setTimeout 将允许代码运行而不锁定页面。这将允许它运行代码，并且不会影响页面上的其他元素。

var cnt = 0;
(function animateGraph() {
    document.getElementById("timeMark").innerHTML = phoneX[cnt].epoch;
    cnt++;
    if (cnt<10){
        window.setTimeout(animateGraph,500);
    }
})();

Answer 2

等待日期时间的 while 循环不是一个好的等待方式 - 它只是阻止执行。它使浏览器(包括 UI 及其更新(保持冻结状态，直到脚本完成。之后，根据DOM重新粉刷窗口。

请改用window.setTimeout()：

function animateGraph(phoneX) {
    var el = document.getElementById("timeMark")
    var i = 0;
    (function nextStep() {
        if (i < phoneX.length )
            el.innerHTML = phoneX[i].epoch;
        i++;
        if (i < phoneX.length )
            window.setTimeout(nextStep, 500);
    })();
}

请注意，这是异步运行的，即函数animateGraph将在显示所有phoneX之前返回。

Answer 3

使用 setTimeout 而不是 while 循环。

https://developer.mozilla.org/en/DOM/window.setTimeout

也可以尝试这样的事情。Javascript setTimeout 函数

Answer 4

以下代码片段使用帮助程序函数来创建计时器。此帮助程序函数接受循环计数器参数i并在计时器处理程序结束时调用自身以进行下一次迭代。

function animateGraph() {
    var graph;
    setTimeMarkDelayed(0);
    function setTimeMarkDelayed(i) {
        setTimeout(function() {
            document.getElementById("timeMark").innerHTML = phoneX[i].epoch;
            if (i < 10) {
                setTimeMarkDelayed(++i);
            }
        }, 3000);
    }
}

您

实际上需要某种辅助函数，否则您最终会在每次迭代中覆盖 for 循环中 for 循环中的 i 值，并且当您的计时器用完时，i已经9并且所有处理程序都将作用于 phoneX 中的最后一个元素。通过将i作为参数传递给帮助程序函数，该值将存储在该函数的本地范围内，不会被覆盖。

或者你可以像Radu建议的那样使用setInterval，这两种方法都有效。