Tutorial
\nRead: https:\/\/www.sitepoint.com\/introduction-jquery-deferred-objects\/
\nhttps:\/\/www.geeksforgeeks.org\/what-are-deferred-and-promise-object-in-jquery\/
\nDeferred samples
\nFind the file in \/home\/satria\/Documents\/jquery\/deferred.html<\/p>\n
<!DOCTYPE html>\r\n<html>\r\n <head>\r\n <meta charset=\"utf-8\">\r\n <title>JQuery Deferred Promise<\/title>\r\n <script src=\"https:\/\/code.jquery.com\/jquery-3.6.0.min.js\"><\/script>\r\n <script>\r\n var data = \"\";\r\n \r\n function loadThis(){\r\n var dfd = jQuery.Deferred();\r\n console.log('Load This');\r\n \/*setTimeout(function(){\r\n console.log('Load This');\r\n dfd.resolve();\r\n }, 3000);*\/\r\n \/\/dfd.resolve(loadInside());\r\n $.when(loadInside1()).then(function(){\r\n $.when(loadInside2()).then(function(){\r\n dfd.resolve();\r\n });\r\n });\r\n \r\n \/\/ Return the Promise so caller can't change the Deferred\r\n return dfd.promise();\r\n }\r\n \r\n function loadInside1(){\r\n var dfd = jQuery.Deferred();\r\n setTimeout(function(){\r\n console.log('Load Inside 1');\r\n dfd.resolve(loadInsideInside1());\r\n }, 3000);\r\n \r\n \/\/ Return the Promise so caller can't change the Deferred\r\n return dfd.promise();\r\n }\r\n \r\n function loadInside2(){\r\n var dfd = jQuery.Deferred();\r\n setTimeout(function(){\r\n console.log('Load Inside 2');\r\n dfd.resolve();\r\n }, 1000);\r\n \r\n \/\/ Return the Promise so caller can't change the Deferred\r\n return dfd.promise();\r\n }\r\n \r\n function loadInsideInside1(){\r\n var dfd = jQuery.Deferred();\r\n setTimeout(function(){\r\n console.log('Load Inside Inside 1');\r\n dfd.resolve();\r\n }, 2000);\r\n \r\n \/\/ Return the Promise so caller can't change the Deferred\r\n return dfd.promise();\r\n }\r\n\r\n $(document).ready(function() {\r\n $('#btn_promise').click(function(){\r\n \/\/ Existing object\r\n \/*var obj = {\r\n hello: function( name ) {\r\n alert( \"Hello \" + name );\r\n }\r\n },\r\n \/\/ Create a Deferred\r\n defer = $.Deferred();\r\n \r\n \/\/ Set object as a promise\r\n defer.promise( obj );\r\n \r\n \/\/ Resolve the deferred\r\n defer.resolve( \"John\" );\r\n \r\n \/\/ Use the object as a Promise\r\n obj.done(function( name ) {\r\n obj.hello( name ); \/\/ Will alert \"Hello John\"\r\n }).hello( \"Karl\" ); *\/\r\n \r\n \/\/ Use the object as a Promise\r\n $.when(loadThis()).then(function( data ) {\r\n console.log( 'After Load This' ); \r\n });\r\n });\r\n });\r\n <\/script>\r\n <\/head>\r\n <body>\r\n <button id=\"btn_promise\" type=\"button\" value=\"Promise\">Promise<\/button>\r\n <\/body> \r\n<html><\/pre>\nDeferred for the recursive sample
\nfind the sample at \/home\/satria\/Documents\/jquery\/deferred-recursive.html<\/p>\n
<!DOCTYPE html>\r\n<html>\r\n <head>\r\n <meta charset=\"utf-8\">\r\n <title>JQuery Deferred Promise<\/title>\r\n <script src=\"https:\/\/code.jquery.com\/jquery-3.6.0.min.js\"><\/script>\r\n <script>\r\n var data = \"\";\r\n \r\n function loadThis(){\r\n var dfd = jQuery.Deferred();\r\n console.log('Load This First');\r\n \r\n var result = \"\";\r\n $.when(waitForElement(result, function(){\r\n console.log('Element found');\r\n })).then(function () {\r\n console.log('after waitForPdf');\r\n dfd.resolve();\r\n });\r\n \r\n \/\/dfd.resolve(waitForPdf(result));\r\n \r\n \/\/ Return the Promise so caller can't change the Deferred\r\n return dfd.promise();\r\n }\r\n \r\n function waitForElement(selector, callback, maxTimes) {\r\n \/\/var dfd = $.Deferred();\r\n if (!this.dfd) {\/\/ for first run create deffered\r\n this.dfd = new $.Deferred();\r\n }\r\n if (selector) {\r\n callback();\r\n this.dfd.resolveWith(this);\r\n return;\r\n \/\/return dfd.promise();\r\n } else {\r\n if (maxTimes === undefined) {\r\n maxTimes = 10;\r\n }\r\n if (maxTimes) {\r\n maxTimes--;\r\n setTimeout(function () {\r\n \/\/console.log(maxTimes);\r\n if(maxTimes == 5){\r\n selector = \"OK\";\r\n }\r\n waitForElement(selector, callback, maxTimes);\r\n }, 1000);\r\n } else {\r\n console.log(\"Not found\");\r\n this.dfd.resolveWith(this);\r\n return;\r\n \/\/return dfd.promise()\r\n }\r\n }\r\n \r\n return this.dfd.promise();\r\n }\r\n\r\n $(document).ready(function() {\r\n $('#btn_promise').click(function(){\r\n \r\n $.when(loadThis()).then(function( data ) {\r\n console.log( 'Load This Last' ); \r\n });\r\n });\r\n });\r\n <\/script>\r\n <\/head>\r\n <body>\r\n <button id=\"btn_promise\" type=\"button\" value=\"Promise\">Promise<\/button>\r\n <\/body> \r\n<html><\/pre>\n <\/p>\n","protected":false},"excerpt":{"rendered":"
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 <!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 … Continue reading “jQuery Deferred and Promise”<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[47],"tags":[],"class_list":["post-11757","post","type-post","status-publish","format-standard","hentry","category-jquery"],"_links":{"self":[{"href":"https:\/\/myprojects.advchaweb.com\/index.php\/wp-json\/wp\/v2\/posts\/11757","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/myprojects.advchaweb.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/myprojects.advchaweb.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/myprojects.advchaweb.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/myprojects.advchaweb.com\/index.php\/wp-json\/wp\/v2\/comments?post=11757"}],"version-history":[{"count":5,"href":"https:\/\/myprojects.advchaweb.com\/index.php\/wp-json\/wp\/v2\/posts\/11757\/revisions"}],"predecessor-version":[{"id":11762,"href":"https:\/\/myprojects.advchaweb.com\/index.php\/wp-json\/wp\/v2\/posts\/11757\/revisions\/11762"}],"wp:attachment":[{"href":"https:\/\/myprojects.advchaweb.com\/index.php\/wp-json\/wp\/v2\/media?parent=11757"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/myprojects.advchaweb.com\/index.php\/wp-json\/wp\/v2\/categories?post=11757"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/myprojects.advchaweb.com\/index.php\/wp-json\/wp\/v2\/tags?post=11757"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}