Tutorial
Read: https://www.sitepoint.com/introduction-jquery-deferred-objects/
https://www.geeksforgeeks.org/what-are-deferred-and-promise-object-in-jquery/
Deferred samples
Find the file in /home/satria/Documents/jquery/deferred.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JQuery Deferred Promise</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script> var data = ""; function loadThis(){ var dfd = jQuery.Deferred(); console.log('Load This'); /*setTimeout(function(){ console.log('Load This'); dfd.resolve(); }, 3000);*/ //dfd.resolve(loadInside()); $.when(loadInside1()).then(function(){ $.when(loadInside2()).then(function(){ dfd.resolve(); }); }); // Return the Promise so caller can't change the Deferred return dfd.promise(); } function loadInside1(){ var dfd = jQuery.Deferred(); setTimeout(function(){ console.log('Load Inside 1'); dfd.resolve(loadInsideInside1()); }, 3000); // Return the Promise so caller can't change the Deferred return dfd.promise(); } function loadInside2(){ var dfd = jQuery.Deferred(); setTimeout(function(){ console.log('Load Inside 2'); dfd.resolve(); }, 1000); // Return the Promise so caller can't change the Deferred return dfd.promise(); } function loadInsideInside1(){ var dfd = jQuery.Deferred(); setTimeout(function(){ console.log('Load Inside Inside 1'); dfd.resolve(); }, 2000); // Return the Promise so caller can't change the Deferred return dfd.promise(); } $(document).ready(function() { $('#btn_promise').click(function(){ // Existing object /*var obj = { hello: function( name ) { alert( "Hello " + name ); } }, // Create a Deferred defer = $.Deferred(); // Set object as a promise defer.promise( obj ); // Resolve the deferred defer.resolve( "John" ); // Use the object as a Promise obj.done(function( name ) { obj.hello( name ); // Will alert "Hello John" }).hello( "Karl" ); */ // Use the object as a Promise $.when(loadThis()).then(function( data ) { console.log( 'After Load This' ); }); }); }); </script> </head> <body> <button id="btn_promise" type="button" value="Promise">Promise</button> </body> <html> |
Deferred for the recursive sample
find the sample at /home/satria/Documents/jquery/deferred-recursive.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JQuery Deferred Promise</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script> var data = ""; function loadThis(){ var dfd = jQuery.Deferred(); console.log('Load This First'); var result = ""; $.when(waitForElement(result, function(){ console.log('Element found'); })).then(function () { console.log('after waitForPdf'); dfd.resolve(); }); //dfd.resolve(waitForPdf(result)); // Return the Promise so caller can't change the Deferred return dfd.promise(); } function waitForElement(selector, callback, maxTimes) { //var dfd = $.Deferred(); if (!this.dfd) {// for first run create deffered this.dfd = new $.Deferred(); } if (selector) { callback(); this.dfd.resolveWith(this); return; //return dfd.promise(); } else { if (maxTimes === undefined) { maxTimes = 10; } if (maxTimes) { maxTimes--; setTimeout(function () { //console.log(maxTimes); if(maxTimes == 5){ selector = "OK"; } waitForElement(selector, callback, maxTimes); }, 1000); } else { console.log("Not found"); this.dfd.resolveWith(this); return; //return dfd.promise() } } return this.dfd.promise(); } $(document).ready(function() { $('#btn_promise').click(function(){ $.when(loadThis()).then(function( data ) { console.log( 'Load This Last' ); }); }); }); </script> </head> <body> <button id="btn_promise" type="button" value="Promise">Promise</button> </body> <html> |