Root scope digest trigger delay

When invoking $scope.$apply() ten times consecutively, it is expected that ten root scope digests will occur.

If the call to $scope.$apply() is debounced so that the trailing call always completes, can we assume that the final state of the application remains unchanged compared to when there was no debounce in effect?

Is there any way to predict the duration of successive root scope digests, especially considering a previous digest has just finished?

Edit:

To clarify my question's purpose, let's consider a scenario. There is a controller called MyController, which has an instance for each directive called MyDirective.

These controllers listen for an event called my-event and trigger a root-scope digest every time this event occurs.

Ten instances of MyDirective are displayed on the UI using ng-repeat.

Another component triggers an event called my-event. Subsequently, all ten instances of MyController initiate a root-scope digest.

If we overlook the sanity of this situation, the question at hand is: If I debounce the root-scope digest attempts made by MyController, ensuring that the trailing attempt always executes, does the program's correctness remain intact?

var service = require('my-service');

function MyController($scope) {
  this._$scope = $scope;
  myService.on('my-event', this.triggerRootScopeDigest.bind(this));
}

MyController.prototype.triggerRootScopeDigest = function() {
  this._$scope.apply();
}

Answer №1

The modified query still indicates $applyAsync or $evalAsync as the solution to consider.

Take a look at this sample fiddle that compares both $apply() and $applyAsync(): http://jsfiddle.net/635pvkkt/

You can see that 10 items are included using ngRepeat, each monitoring an event called doApply and another event named doApplyAsync to trigger corresponding functions.

Upon clicking the button that emits the doApply event, it initiates 10 $digest calls, each executing the directives' tasks (in this instance, a simple console.log).

In contrast, broadcasting the doApplyAsync leads all 10 directives to carry out their work in a single $digest.

While a debounced callback could serve the purpose as well, you have the option of passing each directive a debounced function reference linked to the parent Controller's scope. If the debounce function operates properly with sufficient debounce time, it will only apply once. In certain scenarios, this might be preferred. However, given the straightforward nature of the original question (assuming triggering a $digest is the primary objective of the event), substituting $apply for $applyAsync (or $evalAsync, depending on semantics) appears more fitting.

UPDATE: While the outcomes remain identical, this fiddle provides a more precise depiction as it invokes real DOM events directly on the elements: http://jsfiddle.net/uh9wxxho/

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Delegating events after removing a class

I have a button element with the 'next' data attribute <button data-button='next' class="disabled">next</button> When I remove the disabled class to activate it, the click event doesn't trigger as expected $("[dat ...

Using javascript, add text to the beginning of a form before it is submitted

I'm trying to modify a form so that "https://" is added to the beginning of the input when it's submitted, without actually showing it in the text box. Here's the script I have so far: <script> function formSubmit(){ var x ...

Making a RESTful API call using JavaScript

Can someone help me with making a call to a REST API using JavaScript, Ajax, or jQuery? curl -v -X PUT -H "Content-Type: application/json" -H "Accept: application/json" -X PUT --user user:password http://url -d "{\"name\": \"Marcus0.2\ ...

Guide to decoding JSONP data sent from a remote server

Working on retrieving data using JSONP. After observing the returned data in Firebug, I can confirm that it is being returned correctly. However, I am facing a challenge in figuring out how to parse it. Is the data returning as a nested array? The callback ...

In my attempts to retrieve specific statistics from the PokeAPI using Axios and Node.js, I encountered an error

Having an issue while trying to utilize the Pokemon API. Whenever attempting to access the attack, HP and speed stats, all Pokemons show up as undefined! Can someone please point out what might be wrong with my API call? const axios = require('axios&a ...

Ways to verify whether a user is not defined

My code includes a command that sends a Direct Message to a user, with the user being specified as follows: let user; if (message.mentions.users.first()) { user = message.mentions.users.first(); } else if (args[0]) { user = message. ...

Failed commitments in Protractor/WebDriverJS

WebdriverIO and Protractor are built on the concept of promises: Both WebdriverIO (and as a result, Protractor) APIs operate asynchronously. All functions return promises. WebdriverIO maintains a queue of pending promises known as the control flow to ...

"Can you provide some guidance on transferring the selected row value to a button that is located outside the grid, including a parameter in v-data-table

<v-toolbar flat> <v-toolbar-title>Details</v-toolbar-title> <div style="width:100%"> <v-col class="text-right"> <v-btn id="btnCopy" @click="Redirect()" clas ...

Is it possible to dynamically insert additional fields when a button is clicked?

My FormGroup is shown below: this.productGroup = this.fb.group({ name: ['', Validators.compose([Validators.required, Validators.maxLength(80)])], desc: ['', Validators.maxLength(3000)], category: ['', Validators.require ...

Guide to handling multiple forms within a single template using Express

If I have an index.html file containing two tables - "Customers" and "Items", along with two forms labeled "Add customer" and "Add item", how can I ensure that submitting these forms results in a new entry being added to the respective table as well as t ...

Vue.js is displaying the error message "Expected Object, got Array" when the length appears as undefined

I have an app where users input style codes into a field. I want to create a popup confirmation modal that displays a message with the number of style codes provided. The code I currently have is: <template> <h4>Style Number</h4> <For ...

Is there a way to install angular libraries manually and ensure all dependencies are included without relying on bower or npm?

Currently, I am facing an issue with importing data from an Excel spreadsheet into my Angular application. I came across a helpful guide to import them into UI-Grid using xlsx.js which seems like a good starting point for me. However, my challenge lies in ...

Adjust the transparency of a separate image within a different container by hovering over another image container

Is my goal too complex to achieve? I am attempting to create a hover effect where the opacity of artwork1 and button1 changes simultaneously when hovered over. However, I am having trouble properly labeling my elements and getting them to interact as inten ...

What is the best way to handle a specific submit button using jQuery/Ajax?

I created a web page with 4 submit buttons that all call the same PHP page process.php using jQuery/Ajax. I trigger this PHP page using the onClick event as shown below: <div class="col-md-12"> <input type="hidden" name="_token" value="<?p ...

"Error encountered while attempting to make the entire row in AngularJS UI-Grid editable simultaneously

I am currently facing an issue while trying to make a whole row editable using ui-grid with AngularJs. If you could take a look at the coding in the provided plnkr link and let me know where I might have gone wrong, that would be really helpful. Click her ...

Enhance the current model in backbone.js by incorporating additional data

When a user selects an item on the webpage, more details need to be fetched and displayed. The API function /api/full_details has been implemented to return the additional data for that item. Challenge: How can I retrieve the additional data and append it ...

Creating objects with variable-dependent values in node.js

I'm currently working on creating a user database in an object to assign values to each user, but I'm struggling to find a way to accomplish this. I attempted using var data = {} and then eval(`data.user_${user} = value`), however, it only write ...

What is the best way to access the parent document of a Firestore collectionGroup query?

I'm currently working on accessing the parent documents of all subcollection queries in my database structure. The setup I am aiming for is something like this: /production/id/position/id/positionhistory While I have successfully retrieved all the d ...

Creating a link using curly braces {{ }} in VUE js

I need assistance in creating links to different pages using data in curly brackets {{ }}, I am having trouble figuring out the correct way to implement them. <div id="app"> <div v-for="data in categorie"> &l ...

Retrieving data from a <span> element within a webpage created using ReactJS

I am completely new to the world of web design and development, so there may be some mistakes in my request. Essentially, I have a webpage that contains numerous span tags like the following example: These span tags are part of a significantly large DOM t ...