[英]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. 我想做的是显示消息5秒钟,但是如果我显示一条新消息,则计时器应重置为5秒钟。
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. 我的理论是,如果我用新的Message
函数覆盖其中包含Message
函数的message
var,则旧的var将连同包含它的计时器一起被销毁。
But its not working out, I think the old timer still exists as sometimes a message is displayed for less than 5 seconds. 但是它无法解决问题,我认为旧计时器仍然存在,因为有时消息显示的时间少于5秒。
Here is a fiddle http://jsfiddle.net/sgRrk/ 这是一个小提琴http://jsfiddle.net/sgRrk/
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));
}
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 如果要覆盖作为对象一部分的变量(如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');
});
What about a function that has a private timer and a public messsage() method? 具有私有计时器和公共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');
});
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');
});
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');
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.