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