javascript - Adakah fungsi animasi dalam jQuery dianggap sebagai pelaksanaan tak segerak?

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


}

Kod di atas dilaksanakanmove(1); mark2=false;这两句的时候，move函数中用了animate动画函数，那move的调用是属于异步的吗？也就是放到任务队列中执行吗，所以首先执行mark2=false;Adakah ini betul untuk difahami?

Answer 1

Saya rasa untuk soalan ini anda boleh menulis console.log('') terus pada kod dan mencetak kandungan untuk mengesahkan pesanan yang anda teka.

Animasi jquery tidak segerak, tidak perlu dikatakan, http://www.cnblogs.com/aaronj...

Prinsip umum ialah menggunakan setTimeout dan seumpamanya untuk menangguhkan pelaksanaan secara kerap. Jelas sekali, panggilan balik animate akan diletakkan dalam baris gilir tugas apabila ia mencapai titik, jadi mark2=falseia mesti dilaksanakan terlebih dahulu.

Answer 2

Pergerakan panggilan mesti disekat serentak,
animate juga menyekat serentak

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

Hasilnya ialah

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

Jika pergerakan tidak segerak
Anda akan melihat "Run End" dahulu dan kemudian perkara lain
Jika animasi tidak segerak
Anda akan melihat pergerakan tamat sebelum animasi bermula.
Sebagai contoh

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

Hasilnya ialah

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