JavaScript显示超时消息超时

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秒。JavaScript显示超时消息超时

我的理论是，如果我用新的Message函数覆盖了包含Message函数的message var，旧函数将随着它包含的计时器一起被销毁。

但它没有工作，我认为旧计时器仍然存在，因为有时消息显示少于5秒。

这里是一个小提琴http://jsfiddle.net/sgRrk/

来源

2014-04-03 andrew

自调用函数是在此代码毫无意义。 –

@Chris我还在学习oo javascript，我不确定函数'object'是否在'实例化'时运行它自己的代码 – andrew

类的新实例在实例化时运行代码，但类有它们的用途特别是当你需要一个具有不同原型的新实例时。在这种情况下，使用这种模式绝对没有理由，并且每次点击都创建一个新的实例。 – adeneo

怎么样，有一个私人定时器和一个函数公共的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'); 
});

Fiddle THIS!

来源

2014-04-04 15:12:23 user0000001

如果要覆盖一个变量是对象的一部分，如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'); 
});

FIDDLE

来源

2014-04-03 20:39:46 adeneo

你刚刚创建了一个全局变量，在另一篇文章中的OP不想要全局... – epascarello

@epascarello - sssjh，他不知道'this'可能是该范围中的窗口。 – adeneo

你想每次清除计时器您创建一个新的消息。

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

来源

2014-04-03 20:40:23 aethercowboy

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

来源

2014-04-03 20:40:59 epascarello

您需要保存超时参考，并重新设置创建一个新的超时时：

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

来源

2014-04-03 20:41:39 Razor

感谢您的帮助，但我确实希望将定时器保留在Message函数的范围内 – andrew

JavaScript显示超时消息超时

回答

相关问题