JavaScript binding and callbacks

Question

I'm trying to calculate instantaneous velocity of the mouse.

To do that, I'm creating x1 = e.pageX to store starting coordinate, and t1 = new Date()... to get starting time. I then want to do a callback after 100 m/s when the mouse has stopped moving, and calculate the new pageX and t2... This was I can get the slope for that given time interval... x2 - x1/t2 - t1

Issue: When I call the callback, I'm trying to use bind to bind the context of the event e (mousemove(function(e)) to the callback. Am I doing it incorrectly?

        var mY = 0,
            mX = 0,
            slope = 0,
            vel = 0,
            thread;

        $(document).ready(function(){

            $(".box").mousemove(function(e) {
                getDirection(e);

                var x1 = e.pageX,
                    t1 = new Date().getTime();

                clearTimeout(thread);
                thread = setTimeout(callback.bind(this), 100);

            });
        });

        function callback(e) {
            var x2 = e.pageX,
                t2 = new Date().getTime(),
                xDist = x2 - x1,
                time = t2 - t1;

            log(x2 + ", " + x1);        
            slope = xDist/time;                         
            log("mouse has stopped");   
        }           

Answer 1

Am I doing it incorrectly?

Yep, you are never passing e to the callback. Looks like you want

callback.bind(this, e)

Inside the event handler, this refers to the DOM element the handler is bound to, not the event.