今天在用jQuery写项目的时候发现,当我点击部门与地方并来回切换的时候,发送的网络请求也是逐步累加。这样的情况很影响性能,很难通过压力测试。
之所以会出现这样的原因是绑定的点击事件不是每点击一次就替换上一次的数据,他是逐步累积的。解决这个方法:再合适的时机对它进行清空处理。
这是之前的写法
$(".nav")
.on("click", ".text4", function () {
const word = $(this).text();
getList1(word);
$(this).addClass("bh").siblings().removeClass("bh");
$(".active0").removeClass('active0')
});
$(".unfold")
.on("click", ".text6", function () {
$(this).addClass('bh').parent().siblings().removeClass('bh')
$(".more").removeClass("actived");
const word1 = $(this).text();
getList1(word1);
$(".bumenguizhang").hide();
$(".diviedConUl").show();
});
解决方法
$(".nav")
.off("click")
.on("click", ".text4", function () {
const word = $(this).text();
getList1(word);
$(this).addClass("bh").siblings().removeClass("bh");
$(".active0").removeClass('active0')
});
$(".unfold")
.off("click")
.on("click", ".text6", function () {
$(this).addClass('bh').parent().siblings().removeClass('bh')
$(".more").removeClass("actived");
const word1 = $(this).text();
getList1(word1);
$(".bumenguizhang").hide();
$(".diviedConUl").show();
});
这里的off()方法就相当与清空,实际上off是对我们之前的点击事件进行解绑,那么解绑了不就代表上一次的点击事件结束,所以当写上这段代码之后之前的累加效果就消失了。
效果实现啦!