CODEWITHSUNDEEP
javascripthtml
user1008537
user1008537

Reputation:

Problems using SetTimeout

I am building a game and using Javascript's SetTimeout feature. I want to track the time between each mouse movement and to do this I am using SetTimeout. The problem is that, SetTimeout is ALWAYS being called every x seconds (like SetInterval). I have been looking at this code for awhile and maybe I have misread the documentation of what SetTimeout does?

To reiterate, My goal is to measure the time between each mouse 'stoke' and it appears that SetTimeout is being called EVERY x milliseconds instead of just once. Please have a look at the code below for more information.

Again, I would like to identify a mouse 'stroke' using SetTimeout. After a mouse 'stroke' (for example a drawing of a line) there is some pause (I identified this as 25 milliseconds in this case).

<html>
<head>
<title> My Game </title>
<script type="text/javascript">
timeout = null;
document.onmousemove = function(e) {
    var event = e || window.event;
    mouseX = event.clientX;
    mouseY = event.clientY;
    console.log(mouseX+","+mouseY);
    clearTimeout(timeout);
    timeout = window.setTimeout(
        function(){alert("New Mouse Movement")
        },25);
}
</script>
</head>

<body>
</body>
</html>

Upvotes: 0

Views: 341

Answers (2)

Tim Withers
Tim Withers

Reputation: 12059

Based on my comment, just have a null time. Then when the mouse is moved, it will set the start time and set a timer for 0.025 seconds. If the mouse continues to move, then it will clear the timeout and start the timer over again. If the mouse stops moving, the timeout function will fire and will log the time spent moving.

timeout = null;
mouseStart=null;
document.onmousemove = function(e) {
    var event = e || window.event;
    if(mouseStart===null){
        mouseStart=new Date();
    }
    mouseX = event.clientX;
    mouseY = event.clientY;
    console.log(mouseX+","+mouseY);
    clearTimeout(timeout);
    timeout = window.setTimeout(
        function(){
            console.log((new Date()).getTime()-mouseStart.getTime())
            mouseStart=null;
        },25);
}

Fiddle, move your mouse in a circle and as soon as you stop you will get the elapsed time of mouse movement in milliseconds (+25 milliseconds): http://jsfiddle.net/rr4g2/

NOTE 25 milliseconds is hella fast. You may want something like 300 milliseconds to make it a little more clear that the mouse has stopped moving.

Upvotes: 1

Henry Blyth
Henry Blyth

Reputation: 1750

You are alerting a new mouse movement 25ms after it happens, not timing how long the gap is between each one. setTimeout is not what you need.

Instead, on each mouse movement save the current time and deduct the previous time from it, then alert that.

Edit: I've swapped alert for console.log since mousemove will run so often.

var oldTime = Date.now();
document.onmousemove = function (e) {
    var event = e || window.event;
    mouseX = event.clientX;
    mouseY = event.clientY;
    console.log(mouseX+","+mouseY);
    // Get the current time.
    var newTime = Date.now();
    // Alert the difference.
    console.log('Time between mouse strokes: ' + (newTime - oldTime) + 'ms');
    // Save the current time for the next movement.
    oldTime = newTime;
};

Upvotes: 0

Related Questions