Jquery 执行顺序


Jquery 执行顺序，Jquery预加载执行顺序是按层级，先自上而下执行父级再自上而下执行父级中的子集

正文

执行顺序

想一下下面的输出：

$(document).ready(function(){
    var a = 10;
    $(function(){
        a = 20;
        console.log(a + "里");
        
        $(function(){
            console.log(a + "！1，里");
        })
    })
    
    console.log(a + "中");
    
    $(function(){
        var a = 30;
        console.log(a + "外");
        
        $(function(){
            console.log(a + "！2，外");
        })
    })
});

结果是：

10中 
20里 
30外 
20！1，里 
30！2，外

可以看出Jquery预加载执行顺序是按层级，先自上而下执行父级再自上而下执行父级中的子集。 这里可以看出js是多线程运行的。

加载次数

以下变量是全局变量，只在加载时初始化读取一次:

$(function() {
    var startPage = $("#startPage").val()
    var pageSize = $("#pageSize").val()
    var bookID = $("#bookID").val()
    var bookName = $("#bookName").val()
    var ftype_id = $("#Ftype").val()
    var stype_id = $("#Stype").val()
})

自定义函数中的局部变量每次触发时都会重新加载一次：

$("#pageSize").on("change",function(){
    //变量名必须放在事件方法内部，不然变量只会在加载时读取一次！！！
    var startPage = $("#startPage").val()
    var pageSize = $("#pageSize").val()
    var bookID = $("#bookID").val()
    var bookName = $("#bookName").val()
    var ftype_id = $("#Ftype").val()
    var stype_id = $("#Stype").val()
    var params = {"doWhat":"queryBookListByParams","startPage":startPage,"pageSize":pageSize,
            "bookID":bookID,"bookName":bookName,"ftype_id":ftype_id,"stype_id":stype_id,};
        showbooklist(params);
})

在window.onload = function(){ } 中使用var 变量名 声明全局变量，以后可以在与浏览器该页面多次操作交互的子函数中随时访问和修改这个全局变量， 这样就使这个变量像数据库中的具体字段值一样，可以保存唯一值，具体操作中也可以作为唯一的判断标准。

同理，在Jquery中，$(function(){}) 或者 $(document).ready(function(){}) 中使用var 变量名 也是声明为全局变量。

$(function(){})是$(document).ready(function(){})的简写，相当于window.onload = function(){ } ，

window.onload是在页面所有的元素都加载完成后才触发，

$(function(){})是在页面的dom结构加载完毕后就触发 dom里的内容不一定都已经加载完成，

比如说一个页面有好多图片 而加载这些图片需要一定的时间，

window.onload必须得等到全部的图片都加载完成后才能触发，

而$(function(){})只要在dom加载完毕之后就会执行 图片不一定已经加载完成。

二者的区别

1：执行时机不一样

$(function() { } )是在dom结构创建完成以后就执行，window.onload是在整个页面加载完成之后（包括页面上的资源，比如图片）才执行。

2：执行次数不一样：

$(function() { } )不管你jsp引入的js里定义了几个，会按照顺序依次执行，而window.onload只会执行最后一个，之前的会被覆盖掉。






参考资料

jquery局部变量和全局变量的错误 https://www.cnblogs.com/klory/p/10803355.html

返回