JavaScript setTimeout运行两次

Question

I am trying to make a function that starts in exact intervals to keep stanble update rate. The problem is that it seems to execute in 2 channels. This is the log:

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

First, I exectute my function using

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

and the function looks like this:

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);
}

It happens in both, Chrome and Firefox. Do you know what is it caused by? And... How to fix it?

PS Since everyone seems to be so confused about the running variable, here it is: it's a private parent object member that indicates whether the mechanism is still running or has stopped. It's set by other functions and is just there to make sure this function doesn't continue working after stop() is called.

-- update -- timeLapse is set to 1000 (1 time per seconds) and never changed again.

onDrawListener is set to this function:

function(timeElapsed){
        canvas.clear();

        moveSnake();

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


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

    }

to explain it: canvas is kinda the engine that takes care of callbacks, key listening and also has a few functions. Other than that seems kinda self-explaining. they do nothing other than some int algorithms and drawing in the canvas.

-- Figured out -- I understood that I should calculate time spent for current function and not since the last one started. My old method worked not in 2 channels but rather in long-short-long-short-long-... delayes

Answer 1

首先，您不设置运行中的布尔值，而且当您输入函数时，请立即在drawTimer上执行clearTimeout。

clearTimeout(drawTimer);

Answer 2

In a loop like that, you should consider to write:

 if(timeElapsed >= AMOUNT_OF_TIME) 
{   
 // run code 
}