從 sync 到 async

TonyQ

Sync

for(var i = 0 ; i < 10 ;++i){
        console.log(i);
}

console.log(i);

why async - 1

$("body").on("click",function(){
            console.log("hi");

});

Text

Text

$.get("/test",function(response){
        console.log(response);
});

Async => callback

$(".my-btn".click(function(){

   $.get("/test",function(response){

          $(".my-div").html(response);

          $(".my-div .my-specific-btn").on("click",function(){

                $.post("/update",myparam,function(){

                         //show something

                });

          });

   });

});

Even worse

When need multiple data to render

$.get("/users",fucntion(data){

    $.get("/articles",function(articles){

          $.get("/advertise",function(advs){

                   render(data,articles,advs);

          });

    });

});

It's obviously not the best choice.

why async -2

Response first

Lazy load

Promise JS

live coding

Async.JS

live coding

Thanks