Question

What is the best way to pull in the event object when using setTimeout? I’m using jQuery to handle normalizing the event model in all browsers, but I’m not sure how to get the ‘e’ object in to the checkPos function.

My current code:

function MouseDownEvent(e) {
    *snip*
    timeoutID = setTimeout(checkPos(e), 500);
}
function checkPos(e) {
    //function uses e on a timeout of 500ms
    timeoutID = setTimeout( checkPos(e) }, 500);
}

Currently that code works once because the function is called in the mousedown event, but never updates the e object as the user moves the mouse. The FF javascript error console also declares that it is ‘a useless setTimeout call (missing quotes around argument?)’, but following that advice causes it to completely fail.

How can I pull in the ‘e’ event argument from a setTimeout call?

Edit: Added in the code that reruns the checkPos function every 500ms

Answer 1

Firstly why are you using two timeouts? It looks to me like setInterval() would be better

function MouseDownEvent(e) {
 *snip*
 clearInterval(intervalID);
 intervalID = setInterval(function(){checkPos(e);}, 500);
}

Secondly could you please clarify this : “…but never updates the e object as the user moves the mouse.” Why would the event object be updated when the user moves the mouse? You’ve only assigned a mouseDown handler. If you wanted to do something on every mouse move then you should use a mouseMove event, in which case the timeout / interval would be unnecessary anyway.

function MouseMoveEvent(e) {
 //called every time the mouse is moved, event object will contain position
}

As always in JavaScript you should look for an event driven solution first and only use timed handlers when you absolutely have to.

*Edit – addressing issues op raised in comments *

var handler = {
    i : 0,
    function : mouseMoveEvent(e) {
      handler.i++;
      if (handler.i % 100 == 0) {
        //Do expensive operations
      }
    }
}

$(myElement).bind("mousemove", handler.mouseMoveEvent);