代码之家 › 专栏 › 技术社区 › Bachir Messaouri

函数完成后的jQuery回调

callback jquery

Bachir Messaouri · 技术社区 · 3 年前

我有一个脚本,有很多高度动画。所以我想我可以用动画制作一个函数,并随时调用它。问题是,当功能完成后,我可以做各种事情。

到目前为止,这是我的解决方案,效果很好,但并不令人满意(很难知道哪种条件适用于哪种情况):

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...  
            }
        }
    );
}

function x(){ animateHeight(container,300,450,1) }
function y(){ animateHeight(container,300,450,2) }

但我宁愿在通话后立即进行条件设置,而不是像这样:

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

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

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

我查看了Stack overflow,找到了几十个答案,但就我的一生而言,所有的答案都失败了。

以下是我尝试过的一些尝试(有些甚至在Stack Overflow中找到),但在我的情况下没有成功:

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

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

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

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

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

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

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

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

1 回复 | 直到 3 年前

Barmar 3 年前

您可以将代码作为回调函数传递,并从 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
});