Ketika tombol GO! di click:
Hope that make sense. Saya mau buat screencast soal topik ini, nanti kalo udah ada saya link disini.
| <!DOCTYPE HTML> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>jQuery Deferred</title> | |
| <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet"> | |
| <style> | |
| .container { | |
| margin-top:20px; | |
| } | |
| .green-lamp { | |
| width:100%; | |
| height:100px; | |
| background:green; | |
| margin:5px 0; | |
| -webkit-border-radius:10px; | |
| -moz-border-radius:10px; | |
| border-radius:10px; | |
| } | |
| .alert { | |
| margin:5px 0; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <div class="btn-group"> | |
| <button id="go" class="btn">GO!</button> | |
| <button id="reset" class="btn">Reset</button> | |
| </div> | |
| <div class="row"> | |
| <div class="lamp-container span6"> | |
| <div class="green-lamp"></div> | |
| <div class="green-lamp"></div> | |
| <div class="green-lamp"></div> | |
| </div> | |
| <div id="info" class="info span6"> | |
| </div><!-- #info --> | |
| </div> | |
| </div> | |
| <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> | |
| <script src="script.js"></script> | |
| </body> | |
| </html> |
| var consData = function() { | |
| return $.getJSON('http://ergast.com/api/f1/2012/constructors.json?&callback=?'); | |
| }; | |
| var driverData = function() { | |
| return $.getJSON('http://ergast.com/api/f1/2012/drivers.json?&callback=?'); | |
| }; | |
| var fadeTheLamp = function() { | |
| return $('.green-lamp').each(function(i) { | |
| $(this).delay(i * 1000).animate({'opacity': 0}, 1000); | |
| }).promise(); | |
| }; | |
| $('#go').on('click', function() { | |
| // When Constructors data arrived, let us know. | |
| // Don't append DOM node this way in actual project! Please... | |
| consData().done(function() { | |
| $('<div>', { | |
| 'text': 'Constructors data has been successfully done', | |
| 'class': 'alert alert-info' | |
| }).appendTo('#info'); | |
| }); | |
| // When Drivers data arrived, let us know. | |
| // Don't append DOM node this way in actual project! Please... | |
| driverData().done(function() { | |
| $('<div>', { | |
| 'text': 'Drivers data has been successfully done', | |
| 'class': 'alert alert-info' | |
| }).appendTo('#info'); | |
| }); | |
| // When Drivers data, Constructors Data, and the lamps all gone | |
| // Only if those are completed, then inform us. | |
| // if one of those are failed, alert us. | |
| $.when(consData(), driverData(), fadeTheLamp()).then( | |
| //success callback | |
| function(consResp, driverResp) { | |
| $('<div>', { | |
| 'text': 'All async operation above has been done successfully', | |
| 'class': 'alert alert-info' | |
| }).appendTo('#info'); | |
| }, | |
| //error callback | |
| function() { | |
| $('<div>', { | |
| 'text': 'Something went wrong!', | |
| 'class': 'alert alert-error' | |
| }).appendTo('#info'); | |
| } | |
| ); | |
| }); | |
| $('#reset').on('click', function() { | |
| $('.green-lamp').attr('style', ''); | |
| $('#info').empty(); | |
| }); |