javascript - Gilt die Animationsfunktion in jQuery als asynchrone Ausführung?

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


}

Der obige Code wird ausgeführtmove(1); mark2=false;这两句的时候，move函数中用了animate动画函数，那move的调用是属于异步的吗？也就是放到任务队列中执行吗，所以首先执行mark2=false;Ist das richtig zu verstehen?

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