JavaScript setTimeout Runs Twice

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=86开发者_如何学C0; 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?

P.S. 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

---

first of all you dont set the running bool and also when you enter the function immediately do a on clearTimeout on drawTimer.

clearTimeout(drawTimer);

---

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

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