1 
    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 直到数组中的最后一项才显示出来……为什么？

4

4 回答 4

5

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

var cnt = 0;
(function animateGraph() {
    document.getElementById("timeMark").innerHTML = phoneX[cnt].epoch;
    cnt++;
    if (cnt<10){
        window.setTimeout(animateGraph,500);
    }
})();
于 2012-05-17T23:48:21.213 回答
1

等待日期时间的 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将在所有phoneXes 显示之前返回。

于 2012-05-17T23:46:59.693 回答
0

使用 setTimeout 而不是 while 循环。

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

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

于 2012-05-17T23:45:17.353 回答
0

以下代码片段使用辅助函数来创建计时器。这个辅助函数接受一个循环计数器参数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);
    }
}

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

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

于 2012-05-17T23:58:27.570 回答