Angular.js several functions inside ng directive do not execute asynchronously (concurrently)

Question

I have several functions attached to ng-click directive. The first function filters the list of items and is a a directive scope function, while the second method filters and puts markers on the map and it is the method from the controller. The problem is that the second method from the controller executes about 2 seconds and blocks the execution of the first scope function. Code sample :

<li ng-click="setFilter('favorite'); map.citiesFilter({favorite : true});">Best cities</li>

This method from the controller

map.citiesFilter({favorite : true});

executes 2 seconds and blocks the scope function

setFilter('favorite');

Am I doing somehing wrong, or is there any way to execute this functions asynchronously, so that user won't wait until heavy map filter method from controller ends executing.

What's inside the method? If it performs all sync operations then it'll be sync — tymeJV
– tymeJV, Commented Dec 3, 2014 at 21:10
@tymeJV Sorry I've got it wrong. Method from the controller is a part of controller scope. Probably that is causing the issue? — tylik
– tylik, Commented Dec 3, 2014 at 21:13
when you say asynchronously do you mean concurrently? because web browsers only allow one thread / process to execute per tab...this thread is either servicing javascript code or browser rendering...therefore when your javascript executes it prevents any other javascript from running and the browser from rerendering — Logan Murphy
– Logan Murphy, Commented Dec 3, 2014 at 21:19
@LoganMurphy So basically digest cycle won't run till all methods inside ng directive will execute? — tylik
– tylik, Commented Dec 3, 2014 at 21:24
yes, the digest cycle won't run until all blocking code is executed...another thing about javascript - once javascript code is set to execute, it executes until it finishes, since there is no scheduler no other javscript will be given a chance to execute...using $interval, $timeout, and $http services might look concurrent but in reality it is just delaying more blocking javascript code until all other blocking javascript code has been handled — Logan Murphy
– Logan Murphy, Commented Dec 3, 2014 at 21:31

Logan Murphy · Accepted Answer · 2014-12-03 21:52:09Z

1

I think you are confusing asynchronously with concurrently.

Web browsers only allow one thread / process to execute per tab. This thread / process is either servicing javascript code or browser rendering therefore when your javascript executes it prevents any other javascript from running and the browser from rerendering

This means the angular digest cycle won't run until all blocking code is executed.

Another important thing about javascript is once javascript code is set to execute, it runs until it finishes. Since there is no scheduler no other javscript will be given a chance to execute. Using $interval, $timeout, and $http services might look concurrent but in reality they are just delaying more blocking javascript code until all other blocking javascript code has been completely executed.

answered Dec 3, 2014 at 21:52

Logan Murphy

6,2403 gold badges28 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular.js several functions inside ng directive do not execute asynchronously (concurrently)

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related