Comment forcer les mises à jour d'affichage en temps réel en javascript ?

Question

Comment puis-je obtenir du javascript pour mettre à jour ma page Web en temps réel ? Il semble que mon navigateur Chrome effectue tout le travail de traitement dans les calculs requis, puis met à jour la page Web. Vous trouverez ci-dessous le fichier HTML de test le plus simple. Je préfère voir un comptage séquentiel (plutôt que de simplement passer à la valeur finale). Par quoi dois-je remplacer display.innerHTML=i; J'espère que la réponse n'est pas d'utiliser setInterval ou quelque chose de similaire pour diviser mon calcul en plusieurs calculs. Bien sûr, l'interruption que cela crée permettra à l'affichage de se mettre à jour, mais je n'aime pas être aussi détaillé

P粉369196603 · Answer

requestAnimationFrameChemin

Utilisez requestAnimationFrame ou setTimeout lorsque vous quittez une boucle pour permettre la mise à jour de l'interface utilisateur, puis reprenez la boucle là où elle s'est arrêtée.

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

Méthode Web Worker

Mettez votre algorithme dans un fichier JS et un message sera publié lorsqu'il devra être mis à jour

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

Et dans votre code d'interface utilisateur.

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

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket