javascript - jQuery中的animate函數算是異步執行嗎？

Question

var mark2=true;
if(mark2){
               move(1);
               mark2=false;
} 
 function move(){
                    $(".box").animate({
                     width: arrW[index],
                      height: arrH[index],
                     opacity: arrO[index],
                     left: arrL[index],
                     top: arrT[index]

                    },500,function(){
                     mark2=true;
                    })


}

以上程式碼執行move(1); mark2=false;這兩句的時候，move函數中用了animate動畫函數，那move的呼叫是屬於非同步的嗎？也就是放到任務佇列中執行嗎，所以先執行mark2=false;這樣理解對嗎？

Answer 1

我看這個題主你可以直接在程式碼上寫上console.log('')印內容來驗證你猜想的順序的。

jquery 的animate 是異步的，這個不用說吧，http://www.cnblogs.com/aaronj...

一般原理都是利用setTimeout之類的來定時延遲執行，顯然animate的回調到點會放到任務隊列裡，所以mark2=false肯定先執行了

Answer 2

調用move肯定是同步的阻塞的，
animate也是同步阻塞的

$(document).ready(function () {
    var mark2 = true;
    if (mark2) {
        move(1);
        console.log('运行结束')
    }
})

function move() {
    console.log("move start")

    $(".box").animate({
        width: 50,
        height: 50,
        opacity: 30,
        left: 200,
        top: 200
    }, {
        duration: 1500,
        start: function () {
            console.log("animate start")
        },
        complete: function () {
            console.log("animate end")
        }
    })

    console.log("move end")
}

結果是

first:25 move start
first:37 animate start
first:44 move end
first:20 运行结束
first:40 animate end

如果move不是同步的
你會先看到「運行結束」然後才是其他的東西
如果animate不是同步的
你會看到move end 在 animate start 前頭。
例如

$(document).ready(function () {
    var mark2 = true;
    if (mark2) {
        move(1);
        console.log('运行结束')
    }
})

function move() {
    console.log("move start")
    setTimeout(function () {
        $(".box").animate({
            width: 50,
            height: 50,
            opacity: 30,
            left: 200,
            top: 200
        }, {
            duration: 1500,
            start: function () {
                console.log("animate start")
            },
            complete: function () {
                console.log("animate end")
            }
        })
    }, 500)

    console.log("move end")
}

結果是

first:25 move start
first:45 move end
first:20 运行结束
first:36 animate start
first:39 animate end