Question

我正在进行ajax调用并通知用户，如下所示

$( document ).ready(function() {
    var response = true ;
        if(response)
        {
$(".success").html('<strong>Success!</strong>Value Updated Successfully  !!!').fadeIn(800).delay(1500).fadeOut(800);        
window.location.reload();
        }
});

问题是即时消息正在消失

是否可以在fadeOut成功完成后重新加载页面

http://jsfiddle.net/cod7ceho/430/

Answer 1

更改

$(".success").html('<strong>Success!</strong>Value Updated Successfully  !!!').fadeIn(800).delay(1500).fadeOut(800);        
window.location.reload();

到

$(".success").html('<strong>Success!</strong>Value Updated Successfully  !!!').fadeIn(800).delay(1500).fadeOut(800, function () {        
    window.location.reload();
});

在jQuery Documentation中，您可以找到您的案例：

.fadeOut([duration], [complete])

<强>完整

动画完成后调用的函数（...）

这称为“回调函数”。你会发现它在jQuery中被大量使用。

Answer 2

.fadeOut()有一个回调函数，因此您可以将代码更改为：

$(document).ready(function () {
    var response = true;
    if (response) {
        $(".success").html('<strong>Success!</strong>Value Updated Successfully  !!!').fadeIn(800).delay(1500).fadeOut(800, function () {
            window.location.reload();
        });
    }
});

Answer 3

fadeOut函数以及other fade animation functions提供动画完成时触发的回调。

以下是the documentation -

的示例

$( "#clickme" ).click(function() {
  $( "#book" ).fadeOut( "slow", function() {
    // Animation complete.
  });
});

因此，对于您的情况，使用此回调看起来像这样 -

$(".success").html(...).fadeIn(800).delay(1500).fadeOut(800, function() {
  window.location.reload();
});

由于您要采取的操作实际上是调用现有函数，因此您可以将window.location.reload函数作为回调本身传递，以使您的代码更加清晰 -

...fadeOut(800, window.location.reload);

如果您要执行更多操作，则只需定义自己的回调函数。

由于页面重新加载behvaiour

3 个答案: