0

我正在尝试使用系统时钟在 Javascript 中制作简单的动画。我想循环遍历一个数组，以便间隔[0],[1],[2]...调用。500ms使用上一个Stack Overflow 答案中的示例，我正在尝试使用此代码片段：

function timer(time,update,complete) {
    var start = new Date().getTime();
    var interval = setInterval(function() {
        var now = (time*1000)-(new Date().getTime()-start);
        if( now <= 0) {
            clearInterval(interval);
            complete();
        }
        else update(Math.floor(now/1000));
    },500); // the smaller this number, the more accurate the timer will be
}

然后使用以下方法调用该函数：

timer(
    5, // seconds
    function(timeleft) { // called every step to update the visible countdown        
        console.log(3 - timeleft );
    },
    function() { // what to do after
        console.log("Timer complete!");
    }
);

这产生，0,1,2,3,"Timer Complete"。但是，我无法弄清楚如何以 500 毫秒的间隔调用它。我试过调整数字，但我意识到我并不完全理解这个函数是如何工作的。是否可以对此进行调整，或者是否有一些硬编码的浏览器函数在 1s 间隔被调用？

我尝试将所有值更改为以下内容：

function timer(time,update,complete) {
    var start = new Date().getTime();
    var interval = setInterval(function() {
        var now = (time*500)-(new Date().getTime()-start);
        if( now <= 0) {
            clearInterval(interval);
            complete();
        }
        else update(Math.floor(now/500));
    },500); // the smaller this number, the more accurate the timer will be
}

timer(
    5, // seconds
    function(timeleft) { // called every step to update the visible countdown        
        console.log(5 - timeleft );
    },
    function() { // what to do after
        console.log("Timer complete!");
    }
);

这现在产生：

2
3
4
5
Timer complete!

我认为是 500 毫秒的间隔，但我不确定。更改5in的值5 - timeleft也会对它的运行速度造成奇怪的影响。

4

1 回答 1

0

我相信你把这件事复杂化了。如果您只想每 500 毫秒显示一次数组中的每个项目，请使用常规计数器，而不是时间戳和舍入：

function timer(myArray) {
    var counter = 0;
    var interval = setInterval(function() {

        // There are still items we want to display
        if(counter < myArray.length) {
            console.log(myArray[counter]);

        // We have displayed all 
        } else {
            console.log('Finished');
            clearInterval(interval);
        }

        // Increment counter
        counter++;

    }, 500); // 500 here is the interval in msec
}

var arr = ['Item 0', 'Item 1', 'Item 2', 'Item 3'];
timer(arr);

http://jsfiddle.net/AE58p/

于 2013-04-23T14:09:55.937 回答