JavaScript setTimeout运行两次

2019年8月3日 162次阅读

我试图创建一个以精确间隔开始的函数来保持stanble更新率.问题是它似乎在2个通道中执行.这是日志：

timeElapsed=141; lastDraw=1314040922291
timeElapsed=860; lastDraw=1314040923151
timeElapsed=141; lastDraw=1314040923292
timeElapsed=860; lastDraw=1314040924152
timeElapsed=141; lastDraw=1314040924293
timeElapsed=860; lastDraw=1314040925153
timeElapsed=141; lastDraw=1314040925294
timeElapsed=860; lastDraw=1314040926154
timeElapsed=141; lastDraw=1314040926295
timeElapsed=859; lastDraw=1314040927154
timeElapsed=143; lastDraw=1314040927297
timeElapsed=858; lastDraw=1314040928155
timeElapsed=143; lastDraw=1314040928298
timeElapsed=858; lastDraw=1314040929156
timeElapsed=142; lastDraw=1314040929298

首先,我使用了我的函数

drawTimer = setTimeout(function(){ draw() }, 1);

并且函数看起来像这样：

var draw = function(){
    if(!running)
        return;

    var miliseconds = getCurrentMiliseconds();
    var timeElapsed = miliseconds - lastDraw;
    lastDraw = miliseconds;

    console.log("timeElapsed=" + timeElapsed + "; lastDraw=" + lastDraw);
    onDrawListener(timeElapsed);

    if(timeElapsed < timeLapse)
        miliseconds = timeLapse - timeElapsed;
    else
        miliseconds = 1;        

    drawTimer = setTimeout(function(){ draw() }, miliseconds);
}

它发生在Chrome和Firefox中.你知道它是由什么造成的吗？并……如何解决？

附：由于每个人似乎都对运行变量感到困惑,因此它是：它是一个私有父对象成员,指示该机制是否仍在运行或已停止.它由其他函数设置,只是为了确保调用stop()后该函数不能继续工作.

– 更新 –
timeLapse设置为1000(每秒1次),并且永远不会再次更改.

onDrawListener设置为此函数：

function(timeElapsed){
        canvas.clear();

        moveSnake();

        if(snake.body[0] == food){
            food = getRandomFreePosition();
            ++snake.body.lenght;
        }


        drawBackground();
        drawFood();
        drawSnake();

    }

解释一下：canvas有点像是回调,关键聆听以及一些功能的引擎.除此之外似乎有点自我解释.除了一些int算法和画布中的绘图之外,它们什么都不做.

– 弄清楚 –
我明白我应该计算当前功能花费的时间,而不是自上一次开始以来.我的旧方法不是在2个频道中工作,而是在长短 – 长 – 短 – 长 – 延迟中

最佳答案 首先,你不要设置运行bool,当你输入函数时,立即在drawTimer上执行clearTimeout.

clearTimeout(drawTimer);
点赞