$(window).unbind().scroll(function()) 已经解绑了，触发后还是重复执行？

V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请登录
推荐关注
› Meteor
› JSLint - a JavaScript code quality tool
› jsFiddle
› D3.js
› WebStorm
推荐书目
› JavaScript 权威指南第 5 版
› Closure: The Definitive Guide
这是一个创建于 2707 天前的主题，其中的信息可能已经有所发展或是发生改变。
在线 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
tuihou123321
2017-06-27 15:21:36 +08:00
自己顶下
yangg
2017-06-27 16:04:15 +08:00
scroll 事件本来就是动一下触发多次，你 unbind 没必要，
你需要 throttle 或者 debounce 方法