推荐关注
› Meteor
› JSLint - a JavaScript code quality tool
› jsFiddle
› D3.js
› WebStorm
推荐书目
› JavaScript 权威指南第 5 版
› Closure: The Definitive Guide
› Closure: The Definitive Guide
$(window).unbind().scroll(function()) 已经解绑了，触发后还是重复执行？
tuihou123321 · 2017-06-27 15:20:18 +08:00 · 2635 次点击这是一个创建于 2740 天前的主题，其中的信息可能已经有所发展或是发生改变。
在线 demo 演示： http://bbs2.valueonline.cn/website/lawsMobile/mlaws.html
问题重现操作
- 进入页面后，先 [滚动加载] 5 次
- 再点击 [过滤规则] ，比如：有效性栏目中的有无效，此时页面会请求数据 1 次
- 再 [滚动加载] 会发现默认被执行了 4 次？？？？ 说明：$(window).unbind().scroll(function()) 滚动事件已经用了 unbind 解绑了，怎么还会重复执行呢？
完整 js 代码地址： http://bbs2.valueonline.cn/website/lawsMobile/js/laws.js
主要代码
//获取要传递给后台的数据
function getData(){
loadFun.loading();
isValid = $(".filterDown1 .activeB").attr("data-type");
var len = $(".filterDown2 .activeB");
for (var i = 0; i < len; i++) {
scopeId.push($(".filterDown2 .activeB").eq(i).attr("data-id"));
}
// pageNo=1;
childId=[];
//业务分类 子菜单 id 值；
var objA = $(".filterDown3 .activeC3");
var len2 = objA.length;
for (var i = 0; i < len2; i++) {
var index=objA.eq(i).parent().index();
var objB=$(".right ul").eq(index);
var len9=parseInt(objA.eq(i).html());
//不是全选
if(objB.find("li").hasClass("activeC2")){
for(var j=0;j<len9;j++){
childId.push(objB.find(".activeC2").eq(j).attr("data-childId"));
}
}
//是全选
else{
for(var j=0;j<len9;j++){
childId.push(objB.find("li").eq(j).attr("data-childId"));
}
}
}
// console.log(childId);
//排序方式：data-type 代表排序方式，data-order 代表排序是正序(Asc)还是倒序(Desc);
var orderKey1 = $(".filterDown4 .activeD").attr("data-orderKey1");
var orderKey2 = $(".filterDown4 .activeD").attr("data-orderKey2");
orderKey = orderKey1 + orderKey2;
keyword = $(".searchBox").val();
//如果搜索关键字不为空，就把精读隐藏
if(keyword){
$(".keystone").hide();
}
else{
$(".keystone").show();
}
//pageNo 在滚动加载中是变量，但是在条件查询中一直是 1 ；
arr.isValid=isValid;
arr.scopeId=scopeId;
arr.childId=childId;
arr.orderKey=orderKey;
arr.keyword=keyword;
arr.pageNo=1;
}
//滚动加载
var p = 2; //设置当前页数
var loading = false;
//公用方法--ajax 数据请求
function ajaxData() {
//p=1; //默认进来查询第一页的数据；
getData(); //获取参数
// console.log(orderKey);
//选择查询条件，重新请求的列表数据；
$.post(getUrl,arr,
function(data) {
console.log(0);
if (data.success) {
$("#sectionBox").empty();
var one = "";
var all = "";
var sContent="";
var item = data.result.lawsManageList;
var len = data.result.lawsManageList.length;
for (var j = 0; j < len; j++) {
var jd = "";
var data2 = item[j];
var url = "mviewapp/" + data2.id + ".html";
if (data2.count) {
jd = '<a class="keystone" href="' + url + '" data-id="' + data2.id + '"><em>精读' + data2.count + '条</em></a>';
}
//标题长度截取+高亮显示
if (data2.lawsName.length > maxNum) {
data2.lawsName = data2.lawsName.substring(0, maxNum) + "...";
}
//搜索关键字高亮；
if (keyword) {
var arrKeyword=keyword.split(" ");
for(var i=0;i<arrKeyword.length;i++){
data2.lawsName = data2.lawsName.replace(arrKeyword[i], '<span class="active">' + arrKeyword[i] + '</span>');
data2.searchContent = data2.searchContent.replace(arrKeyword[i], '<span class="active">' + arrKeyword[i] + '</span>');
}
if(data2.searchContent){
sContent='<p class="searchContent">'+data2.searchContent+'</p>';
}
$(".searchContent").show();
$("#searchNum2").html(data.result.count);
}
//判断是否过期
var lawInvalid = "有效";
if (data2.lawInvalid!='2199-01-01') {
lawInvalid = "失效";
}
//颁布时间
if(data2.published){
var published= '<span>' + data2.published + '颁布</span>';
}
one = '<section> <a class="title" href="' + url + '">' + data2.lawsName + '</a>' + jd +sContent+ '<div class="smallBox"> <a href="javascript:">'+data2.typeNoName+'</a></div><div class="smallBox"> <a href="javascript:">' + data2.lawSourceName + '</a> <div class="rightBox"> <span class="bb">' + lawInvalid +'</span>' +published+'</div> </div></section>';
all += one;
}
$("#sectionBox").append(all);
loadFun.loaded();
} else {
alert("操作失败");
}
})
arr.pageNo=2;
p=2;
$(window).unbind().scroll(function() {
var aa = $(document).height() - $(window).height() - $(window).scrollTop(); //页面的高度-显示屏幕的高度-滚动条的高度
if (aa <= 10 && !loading) {
loading = true;
$("#nodata").show().html("<i class='icon icon-spin icon-spinner-indicator'></i> 加载中...");
//滚动加载请求的列表数据；
$.post(getUrl, arr,
function(data) {
console.log(1);
if (data.success) {
loadFun.loading();
var one = "";
var all = "";
var sContent="";
var item = data.result.lawsManageList;
var len = item.length;
for (var j = 0; j < len; j++) {
var jd = "";
var data2 = item[j];
var url = "mviewapp/" + data2.id + ".html";
if (data2.count) {
jd = '<a class="keystone" href="' + url + '" data-id="' + data2.id + '"><em>精读' + data2.count + '条</em></a>';
}
//标题长度截取+高亮显示
if (data2.lawsName.length > maxNum) {
data2.lawsName = data2.lawsName.substring(0, maxNum) + "...";
}
//搜索关键字高亮；
if (keyword) {
var arrKeyword=keyword.split(" ");
for(var i=0;i<arrKeyword.length;i++){
data2.lawsName = data2.lawsName.replace(arrKeyword[i], '<span class="active">' + arrKeyword[i] + '</span>');
data2.searchContent = data2.searchContent.replace(arrKeyword[i], '<span class="active">' + arrKeyword[i] + '</span>');
}
if(data2.searchContent){
sContent='<p class="searchContent">'+data2.searchContent+'</p>';
}
$(".searchContent").show();
}
//判断是否过期
var lawInvalid = "有效";
if (data2.lawInvalid!='2199-01-01') {
lawInvalid = "失效";
}
//颁布时间
if(data2.published){
var published= '<span>' + data2.published + '颁布</span>';
}
one = '<section> <a class="title" href="' + url + '">' + data2.lawsName + '</a>' + jd +sContent+ '<div class="smallBox"> <a href="javascript:">'+data2.typeNoName+'</a></div><div class="smallBox"> <a href="javascript:">' + data2.lawSourceName + '</a> <div class="rightBox"> <span class="bb">' + lawInvalid +'</span>' +published+'</div> </div></section>';
loading = false;
all += one;
}
// console.log(arr.pageNo);
arr.pageNo=++p;
$("#sectionBox").append(all);
loadFun.loaded();
} else {
$(".nodata").show().html("已全部显示");
return false;
}
},
'json');
}
})
}
$(window).unbind().scroll(function() {
var aa = $(document).height() - $(window).height() - $(window).scrollTop(); //页面的高度-显示屏幕的高度-滚动条的高度
if (aa <= 10 && !loading) {
loading = true;
$("#nodata").show().html("<i class='icon icon-spin icon-spinner-indicator'></i> 加载中...");
//滚动加载请求的列表数据；
$.post(getUrl, arr,
function(data) {
console.log(2);
if (data.success) {
loadFun.loading();
var one = "";
var all = "";
var sContent="";
var item = data.result.lawsManageList;
var len = item.length;
for (var j = 0; j < len; j++) {
var jd = "";
var data2 = item[j];
var url = "mviewapp/" + data2.id + ".html";
if (data2.count) {
jd = '<a class="keystone" href="' + url + '" data-id="' + data2.id + '"><em>精读' + data2.count + '条</em></a>';
}
//标题长度截取+高亮显示
if (data2.lawsName.length > maxNum) {
data2.lawsName = data2.lawsName.substring(0, maxNum) + "...";
}
//搜索关键字高亮；
if (keyword) {
var arrKeyword=keyword.split(" ");
for(var i=0;i<arrKeyword.length;i++){
data2.lawsName = data2.lawsName.replace(arrKeyword[i], '<span class="active">' + arrKeyword[i] + '</span>');
data2.searchContent = data2.searchContent.replace(arrKeyword[i], '<span class="active">' + arrKeyword[i] + '</span>');
}
if(data2.searchContent){
sContent='<p class="searchContent">'+data2.searchContent+'</p>';
}
$(".searchContent").show();
}
//判断是否过期
var lawInvalid = "有效";
if (data2.lawInvalid!='2199-01-01') {
lawInvalid = "失效";
}
//颁布时间
if(data2.published){
var published= '<span>' + data2.published + '颁布</span>';
}
one = '<section> <a class="title" href="' + url + '">' + data2.lawsName + '</a>' + jd +sContent+ '<div class="smallBox"> <a href="javascript:">'+data2.typeNoName+'</a></div><div class="smallBox"> <a href="javascript:">' + data2.lawSourceName + '</a> <div class="rightBox"> <span class="bb">' + lawInvalid +'</span>' +published+'</div> </div></section>';
loading = false;
all += one;
}
arr.pageNo=++p;
$("#sectionBox").append(all);
loadFun.loaded();
} else {
$(".nodata").show().html("已全部显示");
return false;
}
},
'json');
}
})
2 条回复 • 2017-06-27 16:04:15 +08:00
 |
1
tuihou123321 OP 自己顶下
|
 |
2
yangg 2017-06-27 16:04:15 +08:00
scroll 事件本来就是动一下触发多次，你 unbind 没必要，
你需要 throttle 或者 debounce 方法 |
Select Language