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

小提琴