ajax提交後，使用jquery的rails flash [：notice]如果頁面沒有準備好，超時會超時？

Question

我有一個關於flash的問題：在ajax提交後顯示的通知。

我有一個彈出框留下一個提交與Ajax的消息，用戶點擊提交後彈出框消失，然後#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設置超時

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