Mensimulasikan kelewatan menggunakan jQuery dan setTimeout ()

Simulasi kelewatan acara, seperti pemuatan hasil simulasi sebelum memaparkannya pada halaman. Contoh ini menggunakan rekursif setTimeout() untuk memanggil fungsi yang melelehkan pelbagai hasil pra-diperiksa untuk memeriksa JavaScript, Flash, versi pelayar, dan banyak lagi. Saya akan menulisnya ke dalam plugin jQuery kemudian apabila saya mempunyai masa, yang mudah, hanya menentukan pilihan apa yang akan diberikan untuk memenuhi situasi penggunaan yang berbeza .

Demo

kod jQuery (rekursif

) setTimeout()

// 数据和设置
var result = '预检查通过。', // 主结果的 HTML
    delay = 500, // 子结果的延迟
    data = [
    'Javascript ',
    '系统 ',
    '设备 ',
    '浏览器 ',
    'Flash '
    ];

// 从数组索引 0 开始的自执行函数
(function process_els(el_index) {
    var el = data[el_index],
        precheckUl = $('#precheck ul'),
        loadingLi = $('<li class="loading">正在加载...</li>'), // 创建加载项
        sysPreId = "syspre_" + el_index;

    // 显示加载图像
    precheckUl.append(loadingLi.clone().attr("id", sysPreId));

    // 模拟延迟后，将加载图像替换为子检查结果
    setTimeout(function() {
        precheckUl.find('li.loading:first').replaceWith('<li>' + data[el_index] + '检查完成</li>'); // 添加检查完成状态
    }, delay);

    // 模拟延迟，递归调用自身，直到所有数组元素都已处理
    if (el_index + 1 < data.length) {
        setTimeout(function() { process_els(el_index + 1); }, delay);
    } else {
        setTimeout(function() {
            // 在所有子检查都插入后追加最终结果
            precheckUl.after('<p>' + result + '</p>');
        }, (delay * 2));
    }
})(0);

html

<div id="precheck">
  <h2>系统检查</h2>
  <ul></ul>
</div>

soalan yang sering ditanya mengenai penggunaan

kelewatan analog (FAQ) setTimeout

mengapa menggunakan

dalam JavaScript? setTimeout

adalah kaedah dalam JavaScript yang membolehkan anda menjadualkan fungsi atau blok kod tertentu untuk dijalankan selepas kelewatan. Ini adalah cara untuk menangguhkan pelaksanaan fungsi. Ini berguna dalam pelbagai situasi, seperti membuat animasi, melambatkan peringatan, atau membuat fungsi menunggu data tertentu. setTimeout

Bagaimana ia berfungsi? setTimeout

Bekerja dengan mengambil dua parameter: fungsi dan kelewatan dalam milisaat. Apabila anda memanggil setTimeout, ia memulakan pemasa. Sebaik sahaja pemasa mencapai kelewatan yang ditentukan, ia melaksanakan fungsi tersebut. Harus diingat bahawa setTimeout tidak akan menjeda pelaksanaan kod yang tinggal. Ia hanya mengatur fungsi untuk dijalankan kemudian. setTimeout

Bolehkah saya membatalkan

? setTimeout

Ya, anda boleh menggunakan fungsi

untuk membatalkan clearTimeout. Apabila anda memanggil setTimeout, ia mengembalikan ID yang unik. Anda boleh lulus ID ini ke setTimeout untuk menghentikan pemasa dan menghalang fungsi daripada dilaksanakan. clearTimeout

Bagaimana untuk membuat kelewatan menggunakan

dalam jQuery? setTimeout

Walaupun jQuery mempunyai kaedah

sendiri, anda masih boleh menggunakan delay dalam konteks jQuery. Anda akan menggunakannya seperti yang anda lakukan di JavaScript biasa dengan melewati fungsi dan kelewatan ke setTimeout. setTimeout Apakah perbezaan antara kaedah

dan kaedah JQuery setTimeout? delay

Walaupun kedua -dua kaedah

dan JQuery setTimeout boleh digunakan untuk membuat kelewatan, mereka bekerja sedikit berbeza. delay digunakan untuk fungsi JavaScript, manakala setTimeout digunakan untuk animasi jQuery. delay direka khusus untuk digunakan dengan beratur kesan JQuery. delay

bolehkah saya menggunakan

dalam async/await? setTimeout

Ya, anda boleh membuat kelewatan dalam fungsi tak segerak menggunakan

dan async/await. Untuk melakukan ini, anda perlu membungkus setTimeout dalam janji. setTimeout

kenapa saya setTimeout tidak berfungsi?

setTimeout anda mungkin tidak berfungsi untuk beberapa sebab. Anda mungkin telah membuat ralat sintaks, atau anda mungkin cuba menggunakan pembolehubah yang belum ditakrifkan. Kelewatan mungkin terlalu pendek untuk diperhatikan, atau fungsi yang anda cuba lakukan boleh menyebabkan kesilapan.

Bolehkah saya menggunakan setTimeout dalam gelung?

Ya, anda boleh menggunakan setTimeout dalam gelung. Walau bagaimanapun, kerana setTimeout tidak menyekat, semua masa akan dimulakan secara serentak. Jika anda ingin membuat satu siri kelewatan, anda perlu menambah kelewatan untuk setiap lelaran gelung.

bagaimana untuk menguji fungsi menggunakan setTimeout?

Fungsi ujian menggunakan setTimeout boleh menjadi rumit kerana kelewatan. Salah satu cara ialah menggunakan rangka kerja ujian yang menyokong ujian tak segerak. Cara lain ialah mensimulasikan setTimeout supaya anda dapat mengawal masa pelaksanaan fungsi.

Adakah terdapat had untuk kelewatan yang boleh saya tetapkan menggunakan setTimeout?

Kelewatan maksimum yang boleh anda tetapkan menggunakan setTimeout adalah 2147483647 milisaat, kira -kira 24.8 hari. Jika anda cuba menetapkan kelewatan yang lebih lama daripada ini, ia akan dikurangkan kepada 1.

Kod telah diubahsuai, dan pemuatan arahan dan siap status siap telah ditambah untuk menjadikannya lebih jelas dan mudah difahami. Laluan imej tetap sama.

Atas ialah kandungan terperinci Mensimulasikan kelewatan menggunakan jQuery dan setTimeout (). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!