個別分頁插件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:建議看不懂的以後可以多打開各種插件和框架源碼看,多思考,相信你會學到更多

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章