个别分页插件bug与如何修改jq插件

本文主要解决个别分页插件在重复调用时产生的回调函数多次重复回调问题

首先我们先说说现象，比如说你在做多页动态数据渲染的时候，分页函数开始是写在请求函数里面的，然后分页函数的回调函数里又有一个请求函数，通过传入分页回调函数返回的page，将该参数放到请求函数的参数里，以此实现根据不同的page调用后台相应页的数据，此时如果不做任何处理的话就可能会重复执行回调函数，比如你只想点一次下一页，就只发一次请求函数，然后渲染数据，可此时却发了两次或更多次请求，这是因为该插件没有处理插件重复调用时，重复绑定事件的情况，这样的话就会执行多次，相当于点击事件的重复绑定会执行多次一样。

那这个时候我们该怎么解决呢？方法很多，先说两种，第一种，第一步设置一全局变量cflag=flash，然后在请求函数里面成功请求时的回调函数里面将cflag变为true，此时在分页回调函数里面判断当cflag为真的时候，才执行，执行完再将cflag设为false就可以了，好了，现在开始上代码

js

var cbFlag = false;
/* 设备表数据获取. */
function showDeviceTable( page, pagesize, cur)
{
var url = “url”;
//
http_new_oper(url, function(dat)//这是我封装的ajax请求函数。里面的function是回调函数
{
cbFlag = true;
var totalPage =(dat.total % 15 == 0 ? dat.total / 15 : Math.ceil(dat.total / 15));//计算要分多少页
       $('#page').paging(//调用分页插件
       {
        pageNo: page + 1, totalPage: totalPage, callback:function(cur)//第一个参数是跳转到第几页，第二个是总共有多少条，第三个就是跳转后的回调函数了，cur是当前页的意思
        {
        if(cbFlag)
showDeviceTable(, cur - 1, pagesize)//因为后台的page是从0开始的，当前页是从1开始，所以要减一
cbFlag = false;
        }
        });
showSnPnDevcode(dat);//这是封装的数据渲染函数
});
}

然而这只是比较不好的办法，必进要加个全局变量，而且是标不治本，实际上回调还是在继续执行，只是没有执行里面的的请求函数而已，那么如何根治呢？第二种方法，那就得打开我们的插件源码，我们帮它写上一段处理插件重复调用时，重复绑定事件的情况的代码，首先打开未压缩的插件代码，然后我们上代码找到我们需要的click

var dataHtml = '';
      if(opts.hasNext){
          dataHtml += '<div class="next fr">' + opts.next + '</div>';
      }
      if(opts.hasLastPage){
          dataHtml += '<div class="last fr">' + opts.lastPage + '</div>';
      }
          dataHtml += '<ul class="pagingUl">' + str1 + str + '</ul>';
      if(opts.hasFirstPage){
          dataHtml += '<div class="first fr">' + opts.firstPage + '</div>';
      }
      if(opts.hasPrv){
          dataHtml += '<div class="prv fr">' + opts.prv + '</div>';
      }
      
     // obj.html(dataHtml).off("click");//在绑定事件前加这段代码即可，这是防止插件重复调用时，重复绑定事件,
      
      obj.on('click', '.next', function () {
        var pageshow = parseInt($('.' + active).html());
        var nums,flag;
        var a = n % 2;
        if(a == 0){
          //偶数
          nums = n;
          flag = true;
        }else if(a == 1){
          //奇数
          nums = (n+1);
          flag = false;
        }

上面的off就是我们要解绑的事件的方法，每调用一次就会解绑一次，这样就避免了点击一次却执行多次的问题，还有一种方法是直接将on改成one，这样就只会执行一次，因为jq 的one方法是每个元素只能运行一次事件处理器函数。无论你绑定多少次都是只执行一次！上代码

bindEvent:function(){//这是面向对象写法的分页插件
                var me=this;
                me.element.on('click','a',function(){//我们只要将on改成one就可以了
                    var num=$(this).html();
                    if(num=="&lt;"){
                        me.options.pageNo=+me.options.pageNo-1;
                    }else if(num=="&gt;"){
                        me.options.pageNo=+me.options.pageNo+1;
                    }else if(num=="Go"){
                        var ipt=+me.element.find('input').val();
                        if(ipt&&ipt<=me.options.totalPage&&ipt!=me.options.pageNo){
                            me.options.pageNo=ipt;
                        }
                    }else{
                        me.options.pageNo=+num;
                    }
                    me.creatHtml();
                    if(me.options.callback){
                        me.options.callback(me.options.pageNo);
                    }
                });
            }

第一种是面向过程思想写的分页插件中的代码，第二种是面向对象思想写的分页插件中的代码，思想不同，但改的两种方法都同时适用以上的分页插件！改插件最主要是看懂它的思路，然后顺其自然就很容易了！ps：建议看不懂的以后可以多打开各种插件和框架源码看，多思考，相信你会学到更多