All geek questions in one place

JQuery $ (function ()) function does an order when $ (function ()) calls more than once

Code like this:

$(window.document).ready(function () { window.alert('alert 1'); }); $(function () { window.alert('alert 2'); }); $(function () { window.alert('alert 3'); }); 
 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Demo2</title> <script src="jquery-3.1.1.js"></script> <script src="demo2.js"></script> </head> <body> </body> </html>

when I execute the above code, sometimes a warning appears that: warning 1, warning 2, warning 3, and sometimes: warning 1, warning 3, warning 2. can someone tell me why?

+5
source share
1 answer

On lines 3930 through 3947 jQuery version 3.1.1 processes .ready() , called after document already loaded. On line 3938, jQuery.ready is called inside setTimeout without setting a duration with a comment attached

 // Handle it asynchronously to allow scripts the opportunity to delay ready

which explains how window.alert('alert 3') could be called before window.alert('alert 2')


 // Catch cases where $(document).ready() is called // after the browser event has already occurred. // Support: IE <=9 - 10 only // Older IE sometimes signals "interactive" too soon if ( document.readyState === "complete" || ( document.readyState !== "loading" && !document.documentElement.doScroll ) ) { // Handle it asynchronously to allow scripts the opportunity to delay ready window.setTimeout( jQuery.ready ); // Line 3938 } else { // Use the handy event callback document.addEventListener( "DOMContentLoaded", completed ); // A fallback to window.onload, that will always work window.addEventListener( "load", completed ); }

The next stacksnippet should reproduce the result described by OP

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Demo2</title> <script src="https://code.jquery.com/jquery-3.1.1.js"></script> <script> $(window.document).ready(function() { window.alert('alert 1'); }); $(function() { window.alert('alert 2'); }); $(function() { window.alert('alert 3'); }); </script> </head> <body> </body> </html>

See also the completed function on line 3924

 // The ready event handler and self cleanup method function completed() { document.removeEventListener( "DOMContentLoaded", completed ); window.removeEventListener( "load", completed ); jQuery.ready(); }

See plnkr http://plnkr.co/edit/C0leBhYJq8CMh7WqndzH?p=preview in version 1

Change, update

To ensure that functions are executed in .ready() , you can return a promise from function calls, use .then() inside a single .ready() call to call functions defined globally or earlier in the .ready() handler.

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Demo2</title> <script src="https://code.jquery.com/jquery-3.1.1.js"></script> <script> function ready1(wait, index) { // do stuff return new Promise(resolve => { setTimeout(() => { window.alert('alert ' + index); resolve(index) }, wait) }) .then((i) => console.log(i)) } function ready2(wait, index) { // do stuff return new Promise(resolve => { setTimeout(() => { window.alert('alert ' + index); resolve(index) }, wait) }) .then((i) => console.log(i)) } function ready3(wait, index) { // do stuff return new Promise(resolve => { setTimeout(() => { window.alert('alert' + index); resolve(index) }, wait) }) .then((i) => console.log(i)) } $().ready(function() { ready1(3000, 0) .then(function() { return ready2(1500, 1) }) .then(function() { return ready3(750, 2) }); }) </script> </head> </html>
+2
source

Source: https://habr.com/ru/post/1257498/

More articles:


All Articles