ajax提交后rails flash [：notice]，如果页面未准备好，jquery Timeout会错过超时？答案

【问题标题】：rails flash[:notice] after ajax submit, with jquery Timeout misses timeout if page not ready?ajax提交后rails flash [：notice]，如果页面未准备好，jquery Timeout会错过超时？
【发布时间】：2011-11-16 17:19:24
【问题描述】：

我有一个关于 ajax 提交后显示的 flash :notice 的问题。

我有一个弹出框留言，用ajax提交，用户点击提交后弹出框消失，然后#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('');

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

提前致谢:)

【问题讨论】：

标签： jquery ruby-on-rails ajax ruby-on-rails-3

【解决方案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设置超时

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

【讨论】：