Mengapa penghapusan jQuery tidak segerak?

Question

Terdapat butang pada halaman seperti berikut

<button onclick="index.testClick()" >开始</button>

Skrip js yang sepadan dengan halaman ini adalah seperti berikut

var index = {
    testClick: function () {
        index.createBtn(function() {
            index.sleep(10000);
        });
    },
    sleep: function (n) {
        var start = new Date().getTime();
        while (true) {
            if(new Date().getTime() - start > n) 
                break;
        } 
    },
    createBtn: function (func) {
        var    button = $('<button>测试</button>');
        button.bind("click",function(){
            button.remove();
            func();    
        });    
        $('body').prepend(button);
    },
};

Mengapa selepas mengklik butang mula dan kemudian mengklik butang ujian, butang ujian sebenarnya tidur (saya perasan ia pada permintaan $.ajax yang disegerakkan, disimulasikan di sini dengan gelung) sebelum dialih keluar? Hanya dengan membungkus tidur dalam setTimeout kita boleh mendapatkan kesan yang diingini...?

Answer 1

Soalan ni memang sikit-sikit... Sekali imbas, saya fikir kod itu tidur selama 10 saat Namun, yang bertanya tidak dapat memahaminya Dari komen di ruangan komen di atas, saya mungkin tahu persoalannya...

Perkara ini berkaitan dengan utas UI penyemak imbas Penyemak imbas adalah satu utas (urutan ini biasanya dipanggil utas UI penyemak imbas).

Bab 6 "JavaScript Berprestasi Tinggi" Antara Muka Pengguna Responsif Pantas, terdapat dua perenggan:

Kebanyakan penyemak imbas mempunyai satu proses pemprosesan yang dikongsi antara dua tugas: tugas JavaScript dan tugas kemas kini antara muka pengguna. Hanya satu daripada operasi ini boleh dilakukan pada satu masa, yang bermaksud bahawa antara muka pengguna tidak boleh bertindak balas terhadap input semasa kod JavaScript sedang berjalan, dan sebaliknya. Dalam erti kata lain, apabila JavaScript sedang berjalan, antara muka pengguna "dikunci". Menguruskan masa jalan JavaScript adalah penting untuk prestasi aplikasi web.

Proses yang dikongsi oleh kemas kini JavaScript dan UI sering dipanggil "benang UI penyemak imbas". Kerja urutan UI adalah berdasarkan sistem baris gilir yang mudah dan tugasan disimpan dalam baris gilir sehingga proses melahu. Setelah melahu, tugas seterusnya dalam baris gilir diekstrak semula dan dijalankan. Tugasan ini sama ada menjalankan kod JS atau melaksanakan kemas kini UI, termasuk melukis semula dan mengalir semula.

function(){
    button.remove();
    func();    
}

Ini ialah fungsi pemprosesan acara klik Selepas js mengalih keluar nod DOM, func() akan terus berjalan dengan serta-merta butang hilang dari halaman.

Satu soalan di ruang komen jawapan lain di atas, ‘Mengapa ini tidak berlaku apabila menambahkannya?’

Fungsi tambahan adalah seperti ini,

    createBtn: function (func) {
        var    button = $('<button>测试</button>'); //生成button
        button.bind("click",function(){   //给button绑点击事件
            button.remove();
            func();    
        });    
        $('body').prepend(button); //把button加到body上
    },

Proses ini tidak berjalan func(). Cuba alihkan fungsi ini dan tukar kepada ini

    createBtn: function (func) {
        var    button = $('<button>测试</button>');
        button.bind("click",function(){
            button.remove();    
        });    
        $('body').prepend(button);
        func();
    },

Pasti terhalang juga

Answer 2

Sepatutnya anda telah menyekat urutan, menyebabkan pemaparan grafik tersekat

Walaupun butang telah dipadamkan daripada pokok dom.

Tetapi grafik tidak melukis semula pokok DOM baharu di mana butang tidak wujud.

Answer 3

Saya fikir ia mudah sebelum ini Ia sepatutnya sama seperti yang dikatakan di tingkat bawah, paparan skrin tersekat.
Sebagai contoh, cetak log sebelum func();:

console.log(func);

Selepas logo keluaran muncul, ia tersekat Kandungan lengkap tidak dipaparkan sehingga tidur dilaksanakan:

Apabila tidur dilaksanakan, halaman disekat dan tidak boleh dikendalikan sama sekali Pada masa yang sama, penggunaan CPU adalah sangat tinggi (kerana tiada selang dalam teori dalam gelung ini). .