Untitled

<!DOCTYPE html>
<html>

  <head>
    <script data-require="jquery@3.0.0" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <h1>!</h1>
  </body>

</html>

console.clear();

(function() {


    doTasks().then(function(arg) {
        console.log(arg)
    })
    
    function doTasks() {
        var d = $.Deferred();
        task1().then(function(arg) {
            console.log(arg)
            task2().then(function(arg) {
                console.log(arg)
                d.resolve('all tasks are done')
            })
        })
        return d.promise();
    }
    
    function task1() {
        var d = $.Deferred();

        console.log("starting task1...")

        setTimeout(function() {
            task1A().then(function() {
                task1B().then(function() {
                    d.resolve('task1 is done')
                })
            })
        }, 10);

        return d.promise();
    }
    
    function task1A() {
        var d = $.Deferred();
        console.log("starting task1A...")
        setTimeout(function() {
            console.log("  resolving task1A...")
            d.resolve();
        }, 1000);
        return d.promise();
    }
    
    function task1B() {
        var d = $.Deferred();
        console.log("starting task1B...")
        setTimeout(function() {
            console.log("  resolving task1B...")
            d.resolve();
        }, 1000);
        return d.promise();
    }
    
    function task2() {
        var d = $.Deferred();
        console.log("starting task2...")

        setTimeout(function() {
            d.resolve('task2 is done');
        }, 1000);
        return d.promise()
    }

}())

/* Styles go here */