VueJS waits until the loop is complete before executing a re-render

Question

VueJS waits until the loop is complete before executing a re-render

Check out this VueJS code snippet:

new Vue({
  el: '#app',
  data: {
    tiles: [
      { isActive: false },
      { isActive: false },
      { isActive: false },
      { isActive: false },
      { isActive: false }
    ]

  },
  methods: {
    startWithLoop: function() {
      console.log("startWithLoop");
      for(var i = 0; i < 10000; i++ ) { this.blink() };
    },
    startWithInterval: function() {
      console.log("startWithInteral");
      setInterval(this.blink);
    },
    blink: function(){
      console.log("blink");
      var index = Math.floor(Math.random() * this.tiles.length);
      this.tiles[index].isActive = !this.tiles[index].isActive;
    }
  }
})

By calling the startWithInterval method, you can witness constant changes in the view as the state of tiles fluctuates.

However, if you use the startWithLoop method, there won't be visible changes in the view until the loop completes its iterations.

You can access the JSFiddle example here.

Is there a way to trigger immediate view updates during each step of the loop?

javascript vue.js vuejs2

Answer 1

Answer №1

This is the inner workings of the Javascript event loop in web browsers, and beyond.

Think of Javascript running only during pauses in time, creating a freeze-frame effect of what occurs in the browser at any given moment.

Answer 2

This is the inner workings of the Javascript event loop in web browsers, and beyond.

Think of Javascript running only during pauses in time, creating a freeze-frame effect of what occurs in the browser at any given moment.

Answer 3

Answer №2

Concluding and synthesizing all the suggestions, I have come to understand that:

In the midst of a JS loop, VueJS will not trigger a re-rendering

Therefore, it is necessary to move the iterations of your loop to a separate process. While I initially considered using promises as a potential solution, a simpler alternative is to utilize setTimeout() without specifying the delay.

So instead of the original code snippet:

for(var i = 0; i < 10000; i++ ) { 
  this.blink() 
};

The revised code would be structured like this:

for(var i = 0; i < 10000; i++ ) { 
  setTimeout(this.blink)
}

Answer 4

Concluding and synthesizing all the suggestions, I have come to understand that:

In the midst of a JS loop, VueJS will not trigger a re-rendering

Therefore, it is necessary to move the iterations of your loop to a separate process. While I initially considered using promises as a potential solution, a simpler alternative is to utilize setTimeout() without specifying the delay.

So instead of the original code snippet:

for(var i = 0; i < 10000; i++ ) { 
  this.blink() 
};

The revised code would be structured like this:

for(var i = 0; i < 10000; i++ ) { 
  setTimeout(this.blink)
}

Answer 5

Answer №3

To achieve the desired effect, you can create a loop-like structure using setTimeout to ensure that changes are detected by Vue and then applied to the 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();
},

To see these modifications in action, check out this working fiddle: https://jsfiddle.net/ssorallen/9pqscat1/3/

Answer 6

To achieve the desired effect, you can create a loop-like structure using setTimeout to ensure that changes are detected by Vue and then applied to the 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();
},

To see these modifications in action, check out this working fiddle: https://jsfiddle.net/ssorallen/9pqscat1/3/

VueJS waits until the loop is complete before executing a re-render

Answer №1

Answer №2

Answer №3

Similar questions

Having trouble with Laravel routes and jQuery $.post()? Keep getting a frustrating 404 Not Found error?

What is the most straightforward method to convert a current Express node app into a static site?

Updating the Laravel array using Vue components can be done by accessing the array

Putting retrieved data from firebase into an array using Angular and Firebase format

Convert the text inside a span element into a key-value object in JavaScript

Extracting Vertices, Edges, Faces, and Triangles from GLB Model Using ThreeJS GLTFLoader

What's the best approach for revalidating data with mutate in SWR?

Vue.JS - Dynamically Displaying Property Values Based on Other Property and Concatenating with

JavaScript code that deletes text from a document - Script eradication

Utilize Vue.js 3 and InertiaJs to Retrieve Session Information in Laravel 9

Using jQuery to select all child elements based on a specified condition

Implement a fadeout effect by using a timeout function that adds a class to the div element in

Gather information from a customizable Bootstrap table and store it in an array

Struggling with running my React App as I'm encountering some errors

Discovering Geo Coordinates with Vue.js

Sending arguments from JavaScript to PHP via ajax

Experiment with jQuery and JavaScript compatibility specifically on Internet Explorer 6

What is causing the array elements to be iterated through multiple times?

The request for http://localhost:3000/insert.js was terminated due to a 404 (Not Found) error

Ways to transform an Array into an object