Question

I’m looking for some help because I don’t quite think I understand the Javascript scoping rules. What I’m trying to do in the below example is to push a button on a page that then starts listening for keyboard input. Once the keyboard input has started if there is a break in input for two seconds I want to stop capturing the input and pop an alert with the full contents of the input collected to that point. This is an example I made purely for this question.

What I see is that I click the button and start entering input. On each keypress I am alerted to the string collected to that point. After the two second, no-action timeout takes place I see an alert with the contents “undefined”. The first alerts listed above come from startLog(). The second alert comes from stopLog(). What am I doing wrong when I call stopLog that it is telling me that this.message is undefined?

function Logger() {
    this.message = '';
    this.listenTimer;

    this.startLog = function() {
        this.message = '';
        $(document).bind('keypress', {this_obj:this}, function(event) {
            event.preventDefault();
            var data = event.data;
            clearTimeout(data.this_obj.listenTimer);
            data.this_obj.message += String.fromCharCode(event.which);
            alert(data.this_obj.message);
            data.this_obj.listenTimer = setTimeout(data.this_obj.stopLog, 2000);
        });
    };

    this.stopLog = function() {
        $(document).unbind("keypress");
        alert(this.message);
    };
}

var k = new Logger();
$('.logging-button').click(function() {
    k.startLog();
});

Answer 1

The issue is this. When you pass an object method as an event handler, it loses its object context; this will refer to the window object.

There are various ways to fix this, but the main issue is that you need to pass setTimeout a closure that will still refer to the correct context:

setTimeout(function() { data.this_obj.stopLog() }, 2000);

On a separate note, you can save yourself some unnecessary code by just using a closure to refer to the object, rather than binding it as event.data:

this.startLog = function() {
    this.message = '';
    var this_obj = this;
    $(document).bind('keypress', function(event) {
        event.preventDefault();
        clearTimeout(this_obj.listenTimer);
        // etc
    });
};