從 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

從 sync 到 async

By TonyQ Wang

從 sync 到 async

  • 1,948
Loading comments...

More from TonyQ Wang