函数完成后的 jQuery 回调答案

【问题标题】：jQuery callback after function is complete函数完成后的 jQuery 回调
【发布时间】：2023-02-04 06:19:49
【问题描述】：

我有一个包含很多高度动画的脚本。所以我想我可以用动画制作一个功能并在我想要的时候调用它。问题是，当功能完成时，我可以做很多事情。

所以这是我迄今为止不满意的解决方案：

function animateHeight(element,height,duration,condition){
    element.animate(
        {"height" : height + 'px'},
        {
            duration : duration,
            easing   : 'easeInOutSine',
            complete : function(){
                if     (condition==1){...}
                else if(condition==2){...}
                else if(condition==3){...}
                etc...  
            }
        }
    );
}

animateHeight(container,300,450,1)

animateHeight(container,300,450,2)

但我宁愿在通话后立即执行条件，而不是像：

function animateHeight(element,height,duration){
    element.animate(
        {"height" : height + 'px'},
        {
            duration : duration,
            easing   : 'easeInOutSine'
        }
    );
}

animateHeight(container,300,450).aferCompletion(function() {
    my custom condition 1
});

animateHeight(container,300,450).aferCompletion(function() {
    my custom condition 2
});

我查看了 Stack overflow 并找到了数十个答案，但就我而言，所有答案都失败了。

以下是我尝试过的一些尝试（有些甚至可以在 Stack Overflow 中找到）但在我的案例中没有奏效：

function animateHeight(element,height,duration,condition){ ....}
animateHeight(container,300,450,1, function(){console.log('ok')})

function animateHeight(element,height,duration,condition,callback){ callback();}
animateHeight(container,300,450,1, function(){console.log('ok')})

function animateHeight(element,height,duration,condition){}
animateHeight(container,300,450,1).done(function(){console.log('ok')})

function animateHeight(element,height,duration,condition){}
$.when(animateHeight(container,300,450,1)).done(function(){console.log('ok')})

function animateHeight(element,height,duration,condition){}
$.when(animateHeight(container,300,450,1)).then(function(){console.log('ok')})

function animateHeight(element,height,duration,condition){data='ok';return data;}
animateHeight(container,300,450,1).then(function(data){console.log('ok')})

async function animateHeight(element,height,duration,condition){return;}
await animateHeight(container,300,450,1).then(function(){console.log('ok')})

我发现的大多数答案都是带有一个函数的变体，当第二个函数完成时调用第三个函数，这不是我想要的。我想要调用一个函数，然后在它完成时返回绿灯，以便我可以直接做其他事情。无论出于何种原因，处理我的案例的答案都很难找到。

【问题讨论】：

标签： jquery callback

【解决方案1】：

您可以将您的代码作为回调函数传递，并从completion: 调用它

function animateHeight(element,height,duration, callback){
    element.animate(
        {"height" : height + 'px'},
        {
            duration : duration,
            easing   : 'easeInOutSine',
            completion: callback
        }
    );
}

animateHeight(container,300,450, function() {
    my custom condition 1
});

animateHeight(container,300,450, function() {
    my custom condition 2
});

【讨论】：