Triggering a function when all data is loaded?

Question

css

There are several functions, each of which makes an Ajax request.
Then you need to run a function that will work with the loaded data.
But how can I run this function when the data is already loaded?
The timer is somehow a crutch to put. Alternatively, in the return value of the ajax function request a1, I run the function a2, and so on. many times. As a result, I also get confused as to what goes where.
Is there a more normal option to run the function when all the necessary data has already been loaded? (in Angularjs / jquery or just in javascript)

Answer 1

jsfiddle.net/cs7w456k/2

Answer 2

jsfiddle.net/cnL8bjue

Answer 3

This is clearly a list, so it can be a trite picture(s) or svg. If you make it a widget and programmatically generate items, then svg will be more convenient.

Answer 4

-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border-top: 1px solid rgba(0,0,0,0.2)
(And don't fuck with box-shadow)

Answer 5

Use promises (the $http service through which you must make all ajax requests always returns them) and $q.all to wait for all operations to complete.

function foo() {
    return $http.get('/foo');
}

function bar() {
    return $http.get('/bar');
}

$q.all([
  foo(),
  bar()
]).then(function (results) {
   // данные загружены
})

Answer 6

The problem is that Ajax is an asynchronous technology. That is, at first, ordinary js works almost instantly, and Ajax gives the return line later, because of this, all work with Ajax data should take place inside the callback functions, there seems to be no other way.
I don’t know about Angular, maybe there is a beautiful solution, but judging by the principle of operation of Ajax (asynchrony), it’s unlikely

Answer 7

https://github.com/caolan/async this will help. We look at the Control Flow section and choose what is more suitable for the task (I think parallel will do here ).

Answer 8

use deferred - this is what you need
1) api.jquery.com/category/deferred-object
2) habrahabr.ru/post/113073

Answer 9

deferred , promise