本文探讨了在使用jQuery load方法加载页面时，由于时间戳防止缓存导致的JS重复加载问题。当同一页面中多个div分别加载不同页面内容时，共用的JS会被加载多次，可能导致事件监听执行多次，从而引发页面异常。解决方案包括按需引入JS，或者在添加事件监听前移除旧的监听。此外，测试发现$.ajaxSetup的cache参数并不能有效防止JS重复执行，因为即使不缓存，多次加载仍会导致执行多次。
1、问题发生场景：
主页包含两个div，div1，div2，div1采用jquery load了page1，div2采用jquery load了page2，page1与page2业务类似，共用一个js，主页可能同时显示page1和page2，这时发现js重复加载了。
2、问题分析：
打开chrome，查看network，在load page1时js后面自动加上了?_1462934775039参数，数字应该是时间戳，紧接着load page2时，js又load了一次，同样带了一个时间戳，和之前时间戳不一样。
首先，js后面带了时间参数是避免使用缓存，看来jquery load方法是默认给js不缓存。其次不管js是否是缓存，加载两次，里面的内容都会执行两次，如果是同名方法定义，后面的方法会覆盖前面的方法，如果是事件监听，则会出现添加多次的情况，这样就会有问题，其实发现这个问题就是因为笔者js里面的事件监听执行了多次，导致页面表现异常。例如如下代码就会导致执行两次：
$(document).on("click.b", ".btn", function(){
console.log("bbbbbb");
});
3、问题解决：
按照最小粒度划分，每个页面只干自己应该干的事，分别引用自己的js，或者js在一处统一引用，一般是不会出现这种问题的。但如果实现存在这种情况，可以在添加监听前，移除之前的监听：
$(document).off("click.b", ".btn");这样可以确保只执行一次。
4、结尾：
网上有人说可以通过在load前设置jquery如下参数，避免这个问题，笔者测试并不行：
$.ajaxSetup ({
cache: false //关闭AJAX相应的缓存
});上面已经解释过，不管是否是缓存，只要加载多次，js里面的定义，方法都会执行多次，不过笔者进一步测试发现，默认情况下，load请求，不设置该参数，在目标页面后面没有加时间戳，在js后面加了，如果设置成false，则不使用缓存，页面和js都加时间戳，设置成true，页面和js都不加时间戳。但是不管页面是否是缓存，页面请求都可以进入笔者的后台，这点需要引起注意。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
