如何在jQuery中延迟执行回调函数

Question

我有两个函数在元素及其子元素上触发动画（

opacity

和

top

），第二个是第一个的回调函数。

它们之间有一个 5 秒的暂停，这是我通过在第二个函数中插入

.delay(5000)

before

animate(...)

创建的。

它有效，但我正在寻找一种方法来在第一个函数结束时有 5 秒的暂停。

原因：我使第二个函数的执行取决于

buttonstate

 变量的值（通过单击按钮设置）。但是该函数在 5 秒延迟之前检查该值，这不好，因为如果在这 5 秒内按下停止按钮，该函数仍然会执行...

function fademove_1(slide_nr) {
    $(".slide_inner").css({"top": "70%", "opacity": "0.01"});
    $(".slide_" + slide_nr + " .slide_inner").delay(500).animate({
        top: "50%",
        opacity: 1
    }, 700, fadeout_1);
  }
function fadeout_1(slide_nr) {
    if(buttonstate != "stop"){
        $(".slide_" + slide_nr).delay(5000).animate({
          opacity: 0.01
        }, 2000);
    }

我根本找不到办法——我尝试过的一切都不起作用。有什么建议我可以做什么吗？

功劳归功于@PitaJ，但以下是我在特定代码中解决该问题的方法。我删除了第二个函数中的延迟，并将其（与

Answer 1

一起）附加到第一个函数，

after

 动画，如下所示：

function fademove_1(slide_nr) {
    $(".slide_inner").css({"top": "70%", "opacity": "0.01"});
    $(".slide_" + slide_nr + " .slide_inner").delay(500).animate({
        top: "50%",
        opacity: 1
    }, 700).delay(5000).promise().then(fadeout_1);;
  }
function fadeout_1(slide_nr) {
    if(buttonstate != "stop"){
        $(".slide_" + slide_nr).animate({
          opacity: 0.01
        }, 2000);
    }

如果您想停止动画然后运行它，请尝试

Answer 2

。 例如：

function fadeout_1(slide_nr) {
    $(".slide_" + slide_nr).stop(true,true).delay(5000).animate({
       opacity: 0.01
    }, 2000);
}`

我希望这有帮助。