Do watches operate asynchronously?

Question

Do watches operate asynchronously?

I am monitoring the status of a variable called radioStatus within a Vue instance:

watch: {
    radioStatus: function(val) {
      if (!this.discovery) {
        $.ajax({ url: '/switch/api/radio/' + (val ? 'on' : 'off') })
      }
    }

This variable may be updated during an AJAX call triggered upon page refresh:

$.ajax({
  url: "/api",
  cache: false
})
  .done(function(response) {
    vm.discovery = true;
    vm.radioStatus = response.radio.ison;  // <-- the change I mention below is here
    vm.discovery = false;
  });

Is it safe to assume that all functions triggered by a change in radioStatus will complete before moving on to the next line (vm.discovery = false)?

My concern lies in the fact that vm.discovery serves as a flag for multiple watched variables (similarly to radioStatus), and it may switch states before the functions related to the watched variables are fully executed.

javascript vue.js

Answer 1

Answer №1

Indeed, watchers work asynchronously. Reference: https://vuejs.org/guide/computed.html#Watchers

A snippet from the mentioned source:

Watchers

While computed properties are... This is particularly helpful when dealing with asynchronous or resource-intensive tasks triggered by data changes.

In the scenario you described, the vm.discovery = false; operation will be carried out before entering the watch. By setting vm.discovery to false, the ajax call inside radioStatus will consistently execute.

To address this issue, you might consider utilizing vm.$nextTick() as outlined below:

$.ajax({url: "/api", cache: false})
    .done(function(response) {
        vm.discovery = true;
        vm.radioStatus = response.radio.ison;
        vm.$nextTick( () => {
            console.log("Setting vm.discovery to false");
            vm.discovery = false;
        });
    });

It's a complex task to handle - because your callback for radioStatus() in watch will also occur within the nextTick context. Assuming the watch is triggered by the previous line (vm.radioStatus = ...), technically it should be queued first and thus completed sooner. To verify this, you may need to include several console.log statements.

Answer 2

Indeed, watchers work asynchronously. Reference: https://vuejs.org/guide/computed.html#Watchers

A snippet from the mentioned source:

Watchers

While computed properties are... This is particularly helpful when dealing with asynchronous or resource-intensive tasks triggered by data changes.

In the scenario you described, the vm.discovery = false; operation will be carried out before entering the watch. By setting vm.discovery to false, the ajax call inside radioStatus will consistently execute.

To address this issue, you might consider utilizing vm.$nextTick() as outlined below:

$.ajax({url: "/api", cache: false})
    .done(function(response) {
        vm.discovery = true;
        vm.radioStatus = response.radio.ison;
        vm.$nextTick( () => {
            console.log("Setting vm.discovery to false");
            vm.discovery = false;
        });
    });

It's a complex task to handle - because your callback for radioStatus() in watch will also occur within the nextTick context. Assuming the watch is triggered by the previous line (vm.radioStatus = ...), technically it should be queued first and thus completed sooner. To verify this, you may need to include several console.log statements.

Do watches operate asynchronously?

Answer №1

Similar questions

Using ThreeJS in conjunction with NextJS requires that class constructors be called with the 'new' keyword

sort the array based on its data type

Is it possible to host static files alongside running an API on the server?

Tips for efficiently expanding NodeJS while running it through an Apache web server?

Creating a dropdown menu in AngularJS using the ng-repeat directive

Create an AngularJS directive that formats the model value for visual display, while retaining the original value in the model

Is there a versatile spell-checking tool available for HTML text boxes?

Having trouble with the scrollbar appearance after updating Chrome?

One controller, divergent template, introducing a fresh variable

In Node.js, JavaScript, when using SQLite, the variables are inserted as Null

The jQuery toggle function seems to be skipping alternate items

The error message states that there is a missing parent component for <MenuItems /> with the <Menu /> component in the slot

Struggling to display the Three.js LightMap?

Alter the functionality of the input element that has a tag of 'multiple'

Display a text box upon clicking an item

When using Vue.js, it is not possible to quote variables in HTML element attributes

Customize the size of innerWidth and innerHeight in your THREEjs project

Vuejs error: Attempting to access properties of undefined

There was a syntax error found in the JSON input when $.ajax() was utilized, resulting in

Javascript for Cordova utilizing WebSocket and incorporating client side certificates