×
文章路径: WEB前端 > JS

jquery load页面导致js重复加载

发表于2年前(May 11, 2016 1:03:36 PM)  阅读 2304  评论 0

分类: WEB前端 JS

标签: 缓存 jquery load js重复加载 事件重复监听 事件监听多次 ajaxSetup cache

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都不加时间戳。但是不管页面是否是缓存,页面请求都可以进入笔者的后台,这点需要引起注意。

发表评论