夏日博客

A-A+

jquery中多个$(document).ready()的执行顺序

2016年01月12日 前端设计 暂无评论 阅读 8 views 次

jquery中多个$(document).ready()的执行顺序问题我相信大家肯定都是认为从文章的开始到结束从上到下执行了，那么是不是这样的呢，我们一起来看看。

最近做插件遇到的问题,记录如下,本文以实例形式说明了多个$(document).ready()的执行顺序问题,由实例可以看出多个$(document).ready()的执行顺序并非单纯的顺序执行,其与嵌套层级也有一定的关系,具体实例代码:

  1. <html>  
  2. <head>  
  3. <script src="./jquery-1.9.0.min.js"></script>  
  4. <script type="text/javascript">  
  5.   $(function(){  
  6.     alert('1');  
  7.     $(function(){  
  8.       alert('2');  
  9.       $(function(){  
  10.         alert('3');  
  11.       });  
  12.     });  
  13.    
  14.    
  15.   });  
  16. </script>  
  17. <body>  
  18. TTTTTTTTTTTT  
  19. <script type="text/javascript">  
  20.   $(document).ready(function() {  
  21.     alert('4');  
  22.     $(function(){  
  23.       alert('5');  
  24.     });  
  25.    
  26.    
  27.   });  
  28. </script>  
  29. KKKKKKKKKKKK  
  30. <script type="text/javascript">  
  31.   $(function(){  
  32.     alert('6');  
  33.     $(document).ready(function() {  
  34.       alert('7');  
  35.     });  
  36.    
  37.    
  38.   });  
  39. </script>  
  40. </body>  
  41. </html>  

运行alert显示顺序为：1，4，6，2，5，7，3

读者可以自己测试体验一下，以加深对多个$(document).ready()执行顺序的理解。

有兴趣还可以在控制台里试试这堆：

  1. var 队列 = [];  
  2. function 队列添加(函数) {  
  3.   队列.push(函数);  
  4. }  
  5. function 执行队列() {  
  6.   while (函数 = 队列.shift()) {  
  7.     函数();  
  8.   }  
  9. }  
  10. 队列添加(function () {  
  11.   console.log('1');  
  12.   队列添加(function () {  
  13.     console.log('2');  
  14.     队列添加(function () {  
  15.       console.log('3');  
  16.     });  
  17.   });  
  18. });  
  19. 队列添加(function () {  
  20.   console.log('4');  
  21.   队列添加(function () {  
  22.     console.log('5');  
  23.   });  
  24. });  
  25. 队列添加(function () {  
  26.   console.log('6');  
  27.   队列添加(function () {  
  28.     console.log('7');  
  29.   });  
  30. });  

执行队列();

标签：

给我留言