javascript - La fonction d'animation dans jQuery est-elle considérée comme une exécution asynchrone?

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


}

Le code ci-dessus est exécutémove(1); mark2=false;这两句的时候，move函数中用了animate动画函数，那move的调用是属于异步的吗？也就是放到任务队列中执行吗，所以首先执行mark2=false;Est-ce correct à comprendre ?

Answer 1

Je pense que pour cette question vous pouvez écrire console.log('') directement sur le code et imprimer le contenu pour vérifier l'ordre que vous avez deviné.

L'animation de jquery est asynchrone, il va sans dire, http://www.cnblogs.com/aaronj...

Le principe général est d'utiliser setTimeout et autres pour retarder régulièrement l'exécution. Évidemment, le rappel d'animate sera placé dans la file d'attente des tâches lorsqu'il atteindra le point, donc mark2=falseil doit être exécuté en premier

.

Answer 2

Le mouvement d'appel doit bloquer de manière synchrone,
animate bloque également de manière synchrone

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

Le résultat est

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

Si le mouvement n'est pas synchrone
Vous verrez d'abord "Run End", puis d'autres choses
Si l'animation n'est pas synchrone
Vous verrez la fin du mouvement avant le début de l'animation.
Par exemple

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

Le résultat est

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