How to run 3 functions in turn?

Question

JavaScript

There is a json script and time value changes. There is an animation that should work before the value changes and the next one after.

Such an algorithm costs the tiles for 4 seconds, then the animation AnimateAut () is triggered - this is the count of the tiles. then the value changes at 5 seconds and Animatein () is triggered - this is the arrival of the plate.

The problem is that the animation of the county works instantly, and not after the expiration of time. And from coming she should quickly and arrives after the expiration of time.

Where did I make a mistake? How to do it right?

var time = 1000;
var dfs = 5000
$.getJSON("data.json", function(data) {
        time = 1000;
        x = function() {

            setTimeout(function() {

                $.each(data['date'], function(key, val) {
                    setTimeout(function() {

                        $('body h1').empty().append(val.chef);;
                        $('body h2').empty().append(val.dolznost);;
                        $('.topick').empty().append(val.anotation);

                        AnimateAut();
                        $('.left_block').attr('src', val.url);;
                    }, dfs)
                    Animatein()
                    dfs += 5000;

                });
                x();
            }, time = 900)

        };
        x();
    })

Here is the whole fiddle code: https://jsfiddle.net/xo8667oq/

Answer 1

Promise. jQuery has its own implementation of promises, google it. You most likely need when .

Answer 2

Alternatively, use the module https://github.com/caolan/async
Function async.waterfall