javascript show override-able message with timeout

Question

var message;

function Message(message) {
        (function () {
            $('#configMsg').html(message);
        }());
        this.timer = setTimeout(function () {
            $('#configMsg').html('');
        }, 5000);
    }

    $('#foo').click(function () {
        message = new Message('foo');
    });

    $('#bar').click(function () {
        message = new Message('bar');
    });

What I'm trying to do is display message for 5 seconds, but if I display a new message the timer should be reset to 5 seconds.

My theory was that if I overwrite the message var which contains a Message function with a new Message function the old one will be destroyed along with the timer that it contains.

But its not working out, I think the old timer still exists as sometimes a message is displayed for less than 5 seconds.

Here is a fiddle http://jsfiddle.net/sgRrk/

Answer 1

function Message(message) {
    var elem = $('#configMsg');
    elem.html(message);
    window.clearTimeout(elem.data("timer"));  //if there is a previous timer, cancel it
    elem.data("timer", setTimeout(function () {  //store the timer reference to remove
        elem.html('');
    }, 5000));
}

Answer 2

If you want to overwrite a variable that is part of an object, as in this.timer , don't create new instances of the object on every click, do it the easy way and use the same function, and clear the timeout on subsequest clicks

function message(message) {
    $('#configMsg').html(message);
    clearTimeout(this.timer);
    this.timer = setTimeout(function () {
        $('#configMsg').html('');
    }, 5000);
}

$('#foo').click(function () {
    message('foo');
});

$('#bar').click(function () {
    message('bar');
});

FIDDLE

Answer 3

What about a function that has a private timer and a public messsage() method?

function messager() {
    var timer;
    return {
        message : function(message){
            $('#configMsg').html(message);
            clearTimeout(timer);
            timer = setTimeout(function () {
                $('#configMsg').html('');
            }, 5000);
        }
    };
}

var msgr = new messager();

$('#foo').click(function () {
    msgr.message('foo');     
});

$('#bar').click(function () {
    msgr.message('bar'); 
});

Fiddle THIS!

Answer 4

You want to clear your timer each time you create a new message.

var message;
var timer;

function Message(message) {
    clearTimeout(timer);
    (function () {
        $('#configMsg').html(message);
    }());
    timer = setTimeout(function () {
        $('#configMsg').html('');
    }, 5000);
}

$('#foo').click(function () {
    message = new Message('foo');
});

$('#bar').click(function () {
    message = new Message('bar');
});

Answer 5

You need to save a timeout reference and reset it when a new timeout is created:

var message,
    timer;

function Message(message) {
    (function () {
        $('#configMsg').html(message);
    }());
    if ( typeof timer != 'undefined' ) {
        clearTimeout( timer );
        delete timer;
    }
    timer = setTimeout(function () {
        $('#configMsg').html('');
    }, 5000);
}

$('#foo').click(function () {
    message = new Message('foo');
});

$('#bar').click(function () {
    message = new Message('bar');
});

Fiddle