Question

目前，当用户点击按钮时，会执行几个javascript函数。因为每个函数都在网站上做了一些动画（关于这个的更多信息可以在第二个评论中找到），我必须一个接一个地执行它们，所以jQuery不会搞砸，因为它在一个不均匀的元素上启动动画已加载/显示。

我目前的解决方案是使用setTimeout像这样调用每个函数，然后调用前一个函数：

window.setTimeout(functionA,250);
window.setTimeout(functionB,500);

这在Chrome中运行良好，但在Firefox中，有时候执行速度太快。因此，我希望通过告诉Javascript仅在前一个函数完成时执行下一个函数来修复此变通方法。

我已经阅读过有关添加回调的内容 - 但我有很多函数要调用。我真的必须为每个函数添加一个回调来实现我想要的吗？

非常感谢提前。

Answer 1

如果您使用的是jQuery动画，请查看jQuery.Deferred。它是所有动画函数的结果，如fadeIn（），slideDown（），animate（）。

你可以结合几个这样的延迟：

var anim1 = $('.sth').animate({left:100});
var anim2 = $('.sth2').fadeOut();
var anim3 = $('.sth4').slideDown();
$.when(anim1, anim2, anim3).then(function(){
    console.log('Animations are ready');
})

Answer 2

为什么不用这样的东西：

$(document).ready(function(){
  $("button").click(function(){
    $.ajax({url:"demo_test.txt",success:function(result){//if your ajax request success

      $("#div1").html(result); // add the result into the HTML

      Sort();//do sorting

      SelectOption();//select the option
    }});
  });
});

Answer 3

您可以尝试使用$.when()和$.then()。我不知道你的代码究竟是什么，但是使用你的例子，就像这样：

$.when(functionA).then(functionB);

这将确保A在B之前完成，而不是使用任意超时。

编辑：实际上在考虑它，这可能不适合你。我建议在jQuery中查看Deferred和Promise，它可以帮助您管理异步操作而不需要所有回调。

Answer 4

你必须添加回调，因为javascript计时器不可靠。

我建议您阅读以下文章：How JavaScript Timers Work

Answer 5

我经常遇到这个问题。如果有更好的方法，我没有找到它，因为JS希望尽可能快地运行，所以它试图尽可能“同时”执行。

你唯一能做的就是让函数返回一个必须在下一个函数中使用的值。

因此...

// This should complete first
function a(target){
    $(target).css('color','black');
    var return_this = a + 1;
    return return_this;
}

// This should complete second
function b(target,a){
    var return_this = a + 1;
    $(target).css('color','white');
    return return_this;
}

// This should run third
function c(target,b){
    var return_this = b + 1;
    $(target).css('color','grey');
    return return_this;
}


$('a').click(){
    var a = a(this);
    var b = b(this,a);
    var c = c(this,b);
    $(this).attr('data-temp',c);
}

这是理论上的，因为我在几个月前就这个问题进行了研究，现在无法访问它。你可能需要稍微玩一下才能让它发挥作用。

JS / jQuery：等待动画完成的功能

5 个答案: