rails flash[:notice]在ajax提交后，如果页面没有准备好，jquery Timeout会错过超时

Question

我有一个关于flash的问题:通知是在ajax提交后显示的。

我有一个弹出框留下一个消息，这是提交与ajax，在用户点击提交后，弹出框消失，然后#flash滑出显示消息，然后滑回后。

问题是，我有一个超时函数，它允许时间的形式在flash出现之前消失(也是#flash消失之前的超时)，所有的工作都很好，除了当页面没有完全加载消息似乎完全错过了超时，就像如果我快速提交一个消息时，页面似乎准备好了，flash将迅速滑出，然后消失之前任何人都可以阅读它。

这是我的代码，也是我的新js:

var el = $('#new_message'); //grab the form
setTimeout(showFlashMessages, 800);
setTimeout(hideFlashMessages, 6000);
// this makes the message form disappear
$('#message_pad').animate({'top':'-300px'},500,function(){
  $('#overlay').fadeOut('fast');
});
//this refreshes the flash partial
$('#flash').html('<%= escape_javascript render( :partial => 'layouts/flash' ) %>');
//this slides out the flash
function showFlashMessages() {
  $('#flash').animate({"top": "+=50px"}, 200)
}
//this hides the flash
function hideFlashMessages() {
  $('#flash').animate({"top": "-=50px"}, 200)
}
// Clear form
el.find('textarea').val('');  

如果有更好的方法来做这一切，我将不胜感激。

提前感谢:)

Answer 1

您可以在上一个操作完成后安排下一个操作。

var el = $('#new_message'); //grab the form
//this refreshes the flash partial
$('#flash').html('<%= escape_javascript render( :partial => 'layouts/flash' ) %>');
// this makes the message form disappear
$('#message_pad').animate({'top':'-300px'},500,function(){
  $('#overlay').fadeOut('fast', function() {
    setTimeout(showFlashMessages, 800);
  });
});
//this slides out the flash
function showFlashMessages() {
  $('#flash').animate({"top": "+=50px"}, 200, function(){
    setTimeout(hideFlashMessages, 5200);
  });
}
//this hides the flash
function hideFlashMessages() {
  $('#flash').animate({"top": "-=50px"}, 200)
}
// Clear form
el.find('textarea').val('');

或者更好，因为fadeOut和animate都使用队列，所以只使用delay来设置timeout

var el = $('#new_message'); //grab the form
// this makes the message form disappear
$('#message_pad').animate({'top':'-300px'},500,function(){
  $('#overlay').fadeOut('fast', function() {
    // Clear form
    el.find('textarea').val('');
    //this refreshes the flash partial
    flash = $('#flash');
    flash.html('<%= escape_javascript render( :partial => 'layouts/flash' ) %>');
    flash.delay(800).animate({"top": "+=50px"}, 200);
    flash.delay(5200).animate({"top": "-=50px"}, 200);
  });
});