javascript - Is the animate function in jQuery considered asynchronous execution?

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


}

The above code is executedmove(1); mark2=false;When these two sentences are used, the animate animation function is used in the move function, then# Is the call to ##move asynchronous? That is to say, put it in the task queue for execution, so execute it firstmark2=false;Is this correct?

Answer 1

I think you can write console.log('') directly on the code and print the content to verify the order you guessed.

jquery’s animate is asynchronous, needless to say, http://www.cnblogs.com/aaronj...

The general principle is to use setTimeout and the like to delay execution regularly. Obviously, animate's callback will be placed in the task queue when the callback point is reached, so mark2=falsemust be executed first

Answer 2

Calling move must be synchronously blocking,
animate is also synchronously blocking

$(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")
}

The result is

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

If move is not synchronous
You will see "Run End" first and then other things
If animate is not synchronous
You will see move end before animate start.
For example

$(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")
}

The result is

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