Bagaimana untuk memaksa kemas kini paparan masa nyata dalam javascript?

Question

Bagaimanakah saya boleh mendapatkan javascript untuk mengemas kini halaman web saya dalam masa nyata? Nampaknya penyemak imbas Chrome saya sedang meletakkan semua kerja pemprosesan ke dalam pengiraan yang diperlukan dan kemudian mengemas kini halaman web. Di bawah ialah fail HTML ujian yang paling mudah. Saya lebih suka melihat pengiraan berurutan (daripada hanya melompat ke nilai akhir). Apakah yang perlu saya gantikan dengan display.innerHTML=i; Saya harap jawapannya adalah tidak menggunakan setInterval atau sesuatu yang serupa untuk memecahkan pengiraan saya kepada banyak pengiraan. Sudah tentu gangguan yang dibuat ini akan membolehkan paparan dikemas kini, tetapi saya tidak suka menjadi begitu terperinci

P粉369196603 · Answer

requestAnimationFrameCara

Gunakan requestAnimationFrame atau setTimeout apabila keluar dari gelung untuk membenarkan UI dikemas kini, kemudian sambung semula gelung di tempat ia berhenti.

const display = document.getElementById("Display");

function process() {

  let index = 0;
  const max = 3000000000;
  
  function run () { 
    while (index <= max) {
      if (index % 100000000 == 0) {
        display.innerHTML = index;
        break;
      }
      index++;
    }
    if (index++ <= max) window.requestAnimationFrame(run);
  }
  
  run();
}

process();

Kaedah Pekerja Web

Masukkan algoritma anda ke dalam fail JS dan mesej akan disiarkan apabila ia perlu dikemas kini

for (let i = 0; i <= 3000000000; i++) {
    if (i %   100000000 == 0) self.postMessage(i);
}

Dan dalam kod UI anda.

const display  = document.getElementById("Display");
const myWorker = new Worker("workerAlgorithm.js");
myWorker.onmessage = (e) => {
  display.innerHTML = e.data;
};

Php8, saya datang juga

Ketahui reka letak tapak web dalam masa 30 minit

Tutorial Video Permulaan Shangguan Oracle kepada Mahir

Baris pertama kod UNI-APP anda

Berkibar dari awal ke pelancaran apl

Tutorial Video Linux Baharu Brother Lian

Tutorial Video AXURE 9 (Sesuai untuk UI Reka Bentuk Produk Interaktif Pengurus Produk)

Tutorial Video PS Kemahiran Asas Sifar

Tutorial video UI 16 hari untuk anda bermula

Tutorial Video Teknik PS dan Teknik Menghiris

Tutorial Video Pembinaan Persekitaran Awan Alibaba dan Pelancaran Projek

Gambaran Keseluruhan Rangkaian Komputer - Pengetahuan Asas yang Perlu Dikuasai Pengaturcara

Tutorial Penting untuk Pengaturcara - Penjelasan Protokol HTTP

Tutorial Video Websocket