javascript顯示帶有超時的可覆蓋消息

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

我想做的是顯示消息5秒鍾，但是如果我顯示一條新消息，則計時器應重置為5秒鍾。

我的理論是，如果我用新的Message函數覆蓋其中包含Message函數的message var，則舊的var將連同包含它的計時器一起被銷毀。

但是它無法解決問題，我認為舊計時器仍然存在，因為有時消息顯示的時間少於5秒。

這是一個小提琴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

如果要覆蓋作為對象一部分的變量（如this.timer ，請不要在每次單擊時都創建該對象的新實例，而是要使用簡單的方法並使用相同的功能，並清除subsequest上的超時點擊次數

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

小提琴

Answer 3

具有私有計時器和公共messsage（）方法的函數呢？

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

擺弄這個！

Answer 4

您想在每次創建新消息時清除計時器。

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

您需要保存一個超時參考，並在創建新超時時將其重置：

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

小提琴