J'ai ce morceau de code Vuejs: si j'appelle la méthode Si j'appelle la méthode Voici Jsfiddle Comment puis-je déclencher des modifications dans le Vue sur chaque étape de la boucle? StartwithInterval Je peux voir en vue comment le tuiles Est-ce que l'état change tout le temps. Startwithloop Je ne vois aucune modification de la vue jusqu'à ce que la boucle soit terminée.
3 Réponses :
Non, voici comment JavaScript EventLoop fonctionne dans les navigateurs (et non seulement).
Vous pouvez imaginer que JavaScript n'est exécuté que dans des "lacunes entre moments", de sorte que votre photo de ce qui se passe dans le navigateur est un instantané toujours du moment.
Vous pouvez écrire quelque chose d'une boucle - comme celle-ci utilise SetTimeout code> pour laisser les modifications à être remarquées par VUE, puis poussées sur le DOM. beforeDestroy() {
if (this.timeout != null) {
clearTimeout(this.timeout);
this.timeout = null;
}
},
startWithLoop: function() {
console.log("startWithLoop");
let i = 0
const iter = () => {
this.blink();
i += 1;
if (i < 10000) {
this.timeout = setTimeout(iter);
}
}
iter();
},
Pourquoi compliquer autant que la boucle? N'est-ce pas assez pour (var i = 0; i <10000; i ++) {Settimeout (this.link)}; ?
Bien sûr, vous pouvez supprimer cela si vous aimez. Je l'ai ajouté parce que c'était dans votre code d'origine.
Je voulais offrir une version simplifiée de votre code, j'ai été tente de modifier votre réponse, mais je pensais que vous ne l'aimez peut-être pas. J'ai créé une nouvelle réponse en prenant votre suggestion, mais simplifie le code d'aller directement au point. Merci
Enroulant et comme fusion de toutes les suggestions, j'ai compris que:
Vous devez donc déplacer les itérations de votre boucle vers un autre processus. Je pensais que promettes em> peut être une solution, mais plus facile est d'utiliser Settimeout () code> sans le retard em> param. P> Donc au lieu de cela: P> for(var i = 0; i < 10000; i++ ) {
setTimeout(this.blink)
}
Ce sera rare, mais il est possible que ce code accède à la composante après avoir été détruit. Si le Settimeout est en file d'attente et que le composant est détruit avant les déclencheurs de délai d'attente, this.blink sera appelé sur le composant détruit. Cela ne va probablement pas causer de problèmes, mais c'est pourquoi mon code comprend un BeforeDestroy et le code pour conserver une référence au délai d'attente en file d'attente.
C'est parce que votre boucle pour la boucle principale occupait: dans ce cas, le navigateur n'a pas de temps entre les boucles pour mettre à jour le DOM, de sorte qu'il donne la mise à jour jusqu'à la fin de la boucle.
Son Todo avec la pile, seinterval met une fonction à appeler sur une pile whiles A pour la boucle ne signifie pas que ce n'est pas async, il se bloque jusqu'à la nextile
Vous pouvez utiliser
$ forcerUpdate ()