Execute the Angular function and then implement

Question

Execute the Angular function and then implement

I have a complex task running in an Angular controller with watchers that may be triggered during the execution of the code. In order to improve performance, I don't want these watchers to interfere. Is there a way to prevent Angular from triggering certain watchers while my code is running? Is this handled internally by Angular or can it be achieved using $q or another method?

For example:

$scope.variableThatKeepsChanging = {};

function someVeryLongFunction(){
  var someVar = variableThatKeepsChanging;
  (...);
}

$scope.clickedFn = function () {
  //Call the very long function here
  someVeryLongFunction();
  //Only then should we invoke the $apply() function in Angular 
}

//Note: The watcher should detect changes not made by someVeryLongFunction()
$scope.$watch('variableThatKeepsChanging', function () {doSomething()});

Thank you.

javascript angularjs asynchronous

Answer 1

Answer №1

If you want to delay a function call, consider using the $timeout service with a timeout value of 0.

$timeout(function(
    someVeryLongFunction();
), 0, false);

Pay attention to the third parameter in the $timeout service - it should not automatically trigger $apply(), so you may need to call it manually afterwards.

Answer 2

If you want to delay a function call, consider using the $timeout service with a timeout value of 0.

$timeout(function(
    someVeryLongFunction();
), 0, false);

Pay attention to the third parameter in the $timeout service - it should not automatically trigger $apply(), so you may need to call it manually afterwards.

Answer 3

Answer №2

It seems to me that instead of using a watcher, utilizing $emit or $broadcast would be more fitting in your scenario. This way, you have direct control over when to send the event.

While it is possible to unbind and rebind watchers, toggling them is not a common practice and may not be considered best practice.

You can create a function to add a watcher:

var addWatcher = function(name){
return $scope.$watch(name...)
}

If you want the watcher to perform an action, simply add a callback to the watcher so it knows what to do; then call it like this:

var mywatcher = addWatcher('scopeName');

To disable the watcher, use this:

myWatcher();

Something along those lines.

Answer 4

It seems to me that instead of using a watcher, utilizing $emit or $broadcast would be more fitting in your scenario. This way, you have direct control over when to send the event.

While it is possible to unbind and rebind watchers, toggling them is not a common practice and may not be considered best practice.

You can create a function to add a watcher:

var addWatcher = function(name){
return $scope.$watch(name...)
}

If you want the watcher to perform an action, simply add a callback to the watcher so it knows what to do; then call it like this:

var mywatcher = addWatcher('scopeName');

To disable the watcher, use this:

myWatcher();

Something along those lines.

Answer 5

Answer №3

When it comes to Javascript, tasks are not run in parallel. This means that the angular component of an application, which also operates under Javascript, will not trigger watchers until the function being executed is complete.

To delve deeper into this concept, consider exploring the Javascript event loop alongside the angular $digest and $apply functions.

https://docs.angularjs.org/guide/scope (Exploring integration with the browser event loop)

Answer 6

When it comes to Javascript, tasks are not run in parallel. This means that the angular component of an application, which also operates under Javascript, will not trigger watchers until the function being executed is complete.

To delve deeper into this concept, consider exploring the Javascript event loop alongside the angular $digest and $apply functions.

https://docs.angularjs.org/guide/scope (Exploring integration with the browser event loop)

Execute the Angular function and then implement

Answer №1

Answer №2

Answer №3

Similar questions

Iterating through every image displayed on a webpage

How to achieve the functionality of multiple inheritance using Object.create()

Canvas.js graph failing to refresh with updated data

The amazing property of AngularJS - Scope

Unable to Access RadioButton for Search Functionality with Jquery Ajax

The difference between invoking a method directly and utilizing a function to invoke a method

Is there a specific code repository available that can verify and transform blog comments into XHTML strict format?

Sending unchanging data from html to an AngularJS application

Enhancing validation in an established tutorial using Backbone

Why is it that styling <div> and <img> with a URL doesn't seem to work, even when applying the same styles?

What is the best way to display unique data each time a user clicks on an item in a list generated by the .map function

After logging in, I am unable to redirect to another PHP page as the login form simply reloads on the same page

Having trouble getting Vue JS 2.0 to display content?

Navigating JSON within HTML forms

I've been attempting to display information from a mongodb server onto my react application, but unfortunately, it's just not functioning as expected

Transfer the textbox value from page-1 to page-2 seamlessly with the help of AngularJS UI-routing

Understanding the Code: React.Js Conditional Rendering

The dropdown Select2, filled from JSP/Ajax, loses functionality after initial use with a button

Tips for customizing the appearance of dayMouseover in Fullcalendar

Can someone help me understand how to show nested values within an ng-repeat loop