Question

var focus = true;

function z() {
    this.t = 0;
    this.p = function (t) {
        if (focus == true) {
            this.t = t;
            alert(this.t);

        }

    }
}
var zp = new z();
setTimeout('zp.p(0)', 100);
window.setInterval('zp.p(1)', 2000);
var ftimer = setTimeout('focus=false', 2000);

document.addEventListener('mousemove', function (e) {
    clearTimeout(ftimer);
    focus = true;
    ftimer = setTimeout('focus=false', 2000);
}, false);

I have this code. but for some reason it only alerts twice even with continuous mouse movements. I have been working at this and investigating in firebug and focus is true when I am moving my mouse. I have been trying to figure out what is going on.. even if I do this:

function z() {
    this.t = 0;
    this.p = function (t) {
        if (focus == true) {
            this.t = t;

        }
        alert(this.t);

    }
}

It still only alerts twice.

I have tried using a looping setTimeout function too but that doesnt work either. It is driving me crazy.

Answer 1

Good that you found your bug.

I would write your code using a bit more functions-as-first-class-objects and less eval logic:

var focus = true;
function z() {
    var that = this; // we won't always have the correct value of "this"
    this.focus = true;
    this.t = 0;
    this.p = function (t) {
        if (that.focus == true) {
            that.t = t;
            alert(t);
        }
    }
    this.fade = ( function(obj){ return function(){ obj.focus = false; } } )(this); // Using self-invokation
}
var zp = new z();
setTimeout(zp.p, 100, 0);
window.setInterval(zp.p, 2000, 1);
var ftimer = setTimeout(zp.fade, 2000);
document.addEventListener('mousemove', function (e) {
    clearTimeout(ftimer);
    zp.focus = true;
    ftimer = setTimeout(zp.fade, 2000);
}, false);

I used a self-invoking function on line 10: ( function(obj){ return function(){...} })(this);, and set this to a different variable.