V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
tuihou123321
V2EX  ›  JavaScript

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

  •  
  •   tuihou123321 · 2017-06-27 15:20:18 +08:00 · 2621 次点击
    这是一个创建于 2705 天前的主题,其中的信息可能已经有所发展或是发生改变。

    在线 demo 演示: http://bbs2.valueonline.cn/website/lawsMobile/mlaws.html

    问题重现操作

    1. 进入页面后,先 [滚动加载] 5 次
    2. 再点击 [过滤规则] ,比如:有效性栏目中的有无效,此时页面会请求数据 1 次
    3. 再 [滚动加载] 会发现默认被执行了 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
        1
    tuihou123321  
    OP
       2017-06-27 15:21:36 +08:00
    自己顶下
    yangg
        2
    yangg  
       2017-06-27 16:04:15 +08:00
    scroll 事件本来就是动一下触发多次,你 unbind 没必要,
    你需要 throttle 或者 debounce 方法
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2703 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 02:05 · PVG 10:05 · LAX 18:05 · JFK 21:05
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.