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

Felix Kling · Accepted Answer · 2014-04-09 20:30:14Z

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.

answered Apr 9, 2014 at 20:30

Felix Kling

820k181 gold badges1.1k silver badges1.2k bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

JavaScript binding and callbacks

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related