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 function

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循环中i的值，当你的计时器用完时，i已经是9，所有处理程序将对phoneX中的最后一个元素执行操作。通过将i作为参数传递给辅助函数，该值存储在该函数的本地范围内，不会被覆盖。

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

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

4 个答案: