js 执行完一个函数之后再执行另外一个函数

一、第一种情况：运动函数执行完之后再执行另外一个函数
注释：按钮点击之后，div先显示出来，然后宽度和高度再增加到300px

<button class="btn">点击我</button>
<div id="div2">
    <p>人的灵魂所必须的东西，是不需要用金钱来买的</p>
</div>
<style>
   div{height: 200px;width: 200px;padding:15px;background: #ececec;display: none;}
</style>
<script>

$().ready(function(){
    $('.btn').click(function(){
        $('div').show();
        $('div').animate({
            'width':'300px',
            'height':'300px'
        },1000)
    })
})

或者这样写，如果div的高度宽度增加到300px,然后会执行另外一个函数，div的背景色会变成绿色
$().ready(function(){
    $('.btn').click(function(){
        $('div').show();
        $('div').animate({
            'width':'300px',
            'height':'300px'            
        },function(){
            $(this).css('background','green')
        })
    })
})

二、第二种情况：把函数a绑定到函数c 上，按钮点击的时候执行函数c，传入的参数是a ,那么函数就先执行函数a(),然后再执行函数b();就形成了先后执行函数

$().ready(function(){
    $('.btn').click(function(){
        c(a);
    })
})
function a() {
    $('div').animate({'width':'300px'},1000)
}

function b(){
    $('div').animate({'height':'300px'},1000)
}
function c(x){
    x();
    b();
}

以上仅仅是个人见解，如果有错误欢迎指正！