CODEWITHSUNDEEP
javascript
andrew
andrew

Reputation: 9583

javascript show override-able message with timeout

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/

Upvotes: 1

Views: 767

Answers (5)

user0000001
user0000001

Reputation: 26

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!

Upvotes: 1

Razor
Razor

Reputation: 29668

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

Upvotes: 0

epascarello
epascarello

Reputation: 207527

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

Upvotes: 2

aethercowboy
aethercowboy

Reputation: 444

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

Upvotes: 0

adeneo
adeneo

Reputation: 318302

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

Upvotes: 1

Related Questions