Question

我有一个运行两个函数的onclick，我希望第一个运行并完成，并在完成启动下一个。我现在就像这样设置它们似乎同时运行：

$("#animate_1").click(function() {
update_1_close();
welcome_open();
});

这些是两个功能，我不想将它们结合起来，我有几个这样的组合它们最终会变得非常复杂

function update_1_close() {
$("#update_1").animate({
    "right": "175px",
    "width": "160px"
}, 450);
$("#update_1_caption").animate({
    "bottom": "0px"
}, 450);
$("#update_1_img").animate({
    "height": "107px",
    "width": "160px"
}, 450);
}

function welcome_open() {
$("#welcome_back_1").animate({
    "top": "345px"
}, 450);
$("#welcome_header_1").animate({
    "top": "35px",
    "left": "20px"
}, 450);
$("#welcome").animate({
    "height": "270px"
}, 450)
$("#stick_figures").animate({
    "top": "215px"
}, 450);
$("#update_1").animate({
    "top": "465px",
    "right": "175px"
}, 450);
$("#update_2").animate({
    "top": "465px"
}, 450);
$("#events").animate({
    "top": "645px"
}, 450);
$("#directions").animate({
    "top": "645px"
}, 450);
}

Answer 1

您可以将welcome_open作为参数传递给update_1_close，并在完成后执行它。由于您正在使用jquery动画，请查看http://api.jquery.com/animate/

您正在寻找“完整”的参数。

function update_1_close( callback ) {
  $("#update_1").animate({
      "right": "175px",
      "width": "160px"
  }, 450, callback );
  $("#update_1_caption").animate({
      "bottom": "0px"
  }, 450);
  $("#update_1_img").animate({
      "height": "107px",
      "width": "160px"
  }, 450);
}


update_1_close( welcome_open );

否则，如果你知道update_1_close完成所需的时间，你可以使用setTimeout（但要小心，因为你可能到处都是魔术数字，似乎已经发生了这样的事情）

Answer 2

它们不能同时运行 - 但是，它们可能会一个接一个地运行，而浏览器没有机会在它们之间刷新。

我不知道这两个函数是做什么的，但你可能想要更像这样的东西：

$("#animate_1").click(function() {
    update_1_close();
    window.setTimeout(welcome_open, 1000);
});

这将运行update_1_close，然后在一秒后运行welcome_open

jquery在启动另一个之前完成一个功能

2 个答案: