CODEWITHSUNDEEP
angularjsangularjs-directiveangularjs-scope
tylik
tylik

Reputation: 1068

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

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.

Upvotes: 0

Views: 230

Answers (1)

Logan Murphy
Logan Murphy

Reputation: 6230

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.

Upvotes: 1

Related Questions