Question

我正在创建一个应用程序，它使用计时器将数据线绘制到多个画布，同时将统计信息更新为DIV。为了创建最流畅的动画，我必须将setInterval()计时器设置为尽可能小的延迟，根据我的理解，浏览器之间的延迟时间在10-15毫秒之间。

我遇到的问题是跟踪跟踪场景运行时间的秒表。秒表本身运行良好，因为我已经使用console.log建立，但是，当我尝试更新DOM元素时setInterval()计时器减速。这让我相信，与小计时器滴答延迟相结合，我更新DOM元素的方式存在性能问题。

代码：

function draw() {

    var drawTimer = setInterval(drawStuffTest, 15);
    var timer = doc.getElementById('time'); 

    var milliseconds = 0;
    var seconds = 0;
    var minutes = 0;

    function updateTimer() {

        //clear the old elapsed time
        timer.innerHTML = "";

        milliseconds += 15;

        //increment seconds
        if (milliseconds >= 1000) {
            seconds++;
            milliseconds = 0;
        }

        //increment minutes
        if(seconds >= 60)
        {
            seconds = 0;
            minutes++;
        }

        //Pad minutes and seconds with leading zeroes if either is lest than 10
        var secondsString = ( seconds < 10 ? "0" : "" ) + seconds;
        var minutesString = ( minutes < 10 ? "0" : "" ) + minutes;

        var elapsedTime = minutesString + ":" + secondsString;

        /* The timer works fine when I just use console.log to display the 
           timer however once I add the following statement to update the DOM 
           element the timer slows down */

        //timer.innerHTML = elapsedTime;
        console.log(elapsedTime);
    }

有人有任何建议吗？

当重复更新setInterval（）中的DOM元素时，Javascript计时器会变慢

0 个答案: