多个$(document).ready()的执行顺序实例分析


Posted in Javascript onJuly 26, 2014

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

<html>
<head>
<script src="./jquery-1.9.0.min.js"></script>
<script type="text/javascript">
  $(function(){
    alert('1');
    $(function(){
      alert('2');
      $(function(){
        alert('3');
      });
    });


  });
</script>
<body>
TTTTTTTTTTTT
<script type="text/javascript">
  $(document).ready(function() {
    alert('4');
    $(function(){
      alert('5');
    });


  });
</script>
KKKKKKKKKKKK
<script type="text/javascript">
  $(function(){
    alert('6');
    $(document).ready(function() {
      alert('7');
    });


  });
</script>
</body>
</html>

运行alert显示顺序为:1,4,6,2,5,7,3
读者可以自己测试体验一下,以加深对多个$(document).ready()执行顺序的理解。

Javascript 相关文章推荐
JS焦点图切换,上下翻转
May 12 Javascript
javascript显示用户停留时间的简单实例
Aug 05 Javascript
js判断日期时间有效性的方法
Oct 24 Javascript
JS设计模式之单例模式(一)
Sep 29 Javascript
vue中使用refs定位dom出现undefined的解决方法
Dec 21 Javascript
JavaScript实现数值自动增加动画
Dec 28 Javascript
微信小程序实现天气预报功能
Jul 18 Javascript
微信小程序可滑动周日历组件使用详解
Oct 21 Javascript
JS轮播图的实现方法2
Aug 25 Javascript
vue或react项目生产环境去掉console.log的操作
Sep 02 Javascript
解决Vue项目中tff报错的问题
Oct 21 Javascript
vue+element table表格实现动态列筛选的示例代码
Jan 14 Vue.js
jquery 取子节点及当前节点属性值
Jul 25 #Javascript
jquery text()方法取标签中的文本
Jul 25 #Javascript
jquery根据属性和index来查找属性值并操作
Jul 25 #Javascript
判断日期是否能跨月查询的js代码
Jul 25 #Javascript
直接在JS里创建JSON数据然后遍历使用
Jul 25 #Javascript
使用documentElement正确取得当前可见区域的大小
Jul 25 #Javascript
JS判断变量是否为空判断是否null
Jul 25 #Javascript
You might like
PHP+MYSQL会员系统的开发实例教程
2014/08/23 PHP
php实现搜索类封装示例
2016/03/31 PHP
PDO::query讲解
2019/01/29 PHP
PHP实现的只保留字符串首尾字符功能示例【隐藏部分字符串】
2019/03/11 PHP
php项目中类的自动加载实例讲解
2019/09/12 PHP
prototype Element学习笔记(Element篇三)
2008/10/26 Javascript
JavaScript 一行代码,轻松搞定浮动快捷留言-V2升级版
2010/04/02 Javascript
Function.prototype.bind用法示例
2013/09/16 Javascript
XMLHttpRequest处理xml格式的返回数据(示例代码)
2013/11/21 Javascript
JavaScript实现动态删除列表框值的方法
2015/08/12 Javascript
浅析JS操作DOM的一些常用方法
2016/05/13 Javascript
深入理解ECMAScript的几个关键语句
2016/06/01 Javascript
JS在Chrome浏览器中showModalDialog函数返回值为undefined的解决方法
2016/08/03 Javascript
jquery radio的取值_radio的选中_radio的重置方法
2016/09/20 Javascript
jquery.Callbacks的实现详解
2016/11/30 Javascript
react 父组件与子组件之间的值传递的方法
2017/09/14 Javascript
spirngmvc js传递复杂json参数到controller的实例
2018/03/29 Javascript
angular 内存溢出的问题解决
2018/07/12 Javascript
详解将微信小程序接口Promise化并使用async函数
2019/08/05 Javascript
JavaScript自定义超时API代码实例
2020/04/30 Javascript
python的构建工具setup.py的方法使用示例
2017/10/23 Python
PyQt5每天必学之滑块控件QSlider
2018/04/20 Python
pycharm debug功能实现跳到循环末尾的方法
2018/11/29 Python
Django操作session 的方法
2020/03/09 Python
Python 实现将numpy中的nan和inf,nan替换成对应的均值
2020/06/08 Python
意大利折扣和优惠券网站:Groupalia
2019/10/09 全球购物
幼儿园保教管理制度
2014/02/03 职场文书
管理岗位竞聘演讲稿
2014/08/18 职场文书
通报表扬范文
2015/01/17 职场文书
苏州园林导游词
2015/02/03 职场文书
公司行政管理制度范本
2015/08/05 职场文书
2019年最新感恩节祝福语(28句)
2019/11/27 职场文书
浅谈CSS不规则边框的生成方案
2021/05/25 HTML / CSS
python面向对象版学生信息管理系统
2021/06/24 Python
vue @click.native 绑定原生点击事件
2022/04/22 Vue.js
SQL Server使用T-SQL语句批处理
2022/05/20 SQL Server