前端懶加載的實際應用，input下拉檢索大量數據（萬條以上）

懶加載：顧名思義，就是頁面加載數據時候偷個懶先。

遇到的實際問題：當你檢索或者后台查詢的數據量規模很大的時候，頁面全部加載出來相對耗時是很長的，這樣就會顯得頁面特別不友好。

交代背景：目前做的一個項目中存在一個下拉檢索的業務，一開始以為數據庫中只有百張表左右，因此也沒有考慮到那么多，后面當同事在現場實施的時候發現客戶歸檔數據庫存在10000張表，然后點擊頁面下拉檢索時候，我是眼睜睜的數了20s才看到數據加載出來了，瞬間就感覺自己的產品做的不滿意（一個看似小的問題可能影響整個項目交付）。所以還是要考慮更全面。

就不再bb這么多了，我們就進入詳情講解吧。

主要運用到這幾個知識點：

1.input框下拉檢索功能，可以模糊匹配過濾

2.setInterval的實際使用和停止

主要思路：數據量大，我們可以分批顯示，也就是所謂的先出來的數據為后續的數據爭取時間，也就是先富帶后富。

技術點1：下拉檢索，主要利用幾個事件（點擊，鍵盤按下抬起，失去焦點）

實現這個功能我們需要考慮以下幾步：

一，先實現點擊input框時候出現下拉數據，代碼實現原理主要就是在原先的input框下面加一個div,然后再追加ul li (或者div),代碼實現如下：

 

二、針對數據刪除時候模糊匹配，這個時候就要考慮回退鍵的按下事件，針對鍵盤按下事件里面可以做一個判斷。如下代碼所示：

//鍵盤抬起事件
        $(div).keyup(function(event){
            //鍵盤事件時候則關閉原先定時器，不然會受其異步性的影響
            clearInterval(setint);
            if(event.keyCode == 38 || event.keyCode == 40 || event.keyCode == 13){
                return;
            }
            $("#g2").css({'opacity':'1'});
            var domval=$(div).val();
            if(domval!=="" && domval!==null){
                dataNotnull(div,jsdata,domHig,indexx,setintfilt);
            }else{
                debugger;
                $("#g2 ul").html("");
                if(jsdata.length>0 && typeof(jsdata)!=="undefined"){
                    $("#g2").css({display:"block"});
                    var columns="";
                    var linum = 0;
                    //執行清除操作
                    $("#g2 ul li").remove();
                    var strli = "";
                    var lenflag = 0;
                    var mycars = "";
                    var jslen = jsdata.length;
                    //懶加載主要核心點
                    setintnull = setInterval(function(){
                        for(var i =0;i<1000;i++){
                            if(lenflag<jslen){
                                mycars+="<li  style=\"width:100%;float:left;line-height:"+domHig+"px;height:"+domHig+"px;cursor:pointer;\">"+
　　　　　　　　　　　　　　　　　　　jsdata[lenflag]+"</li>"
                                lenflag++;
                                linum++;
                            }else{
                                break;
                            }
                        }
                        romanceLi(mycars,linum,domHig,div,indexx);
                        if(lenflag==jslen){
                            clearInterval(setintnull);
                            romanceLi(mycars,linum,domHig,div,indexx);
                        }
                    },50);
                }else{
                    $("#g2").css({'display':"none"});
                }
            }
     });
    //鍵盤按下去的時候
    $(div).keydown(function(event){
        //鍵盤按下時候應該把所有的時間觸發關閉
        clearInterval(setint);
        clearInterval(setintfilt);
        clearInterval(setintnull);
        var li_length = $("#g2 ul li").length;
        var ulheight = li_length*domHig;
        //每頁多少條
        var perpagenum = 200/domHig;
        //共多少頁
        var pagenum = li_length/perpagenum;
        $("#g2 li:eq("+indexx+")").removeClass('activee');
        //上下鍵按下時候的事件觸發38-上 40-下
        if(event.keyCode == 38){
            indexx--;
            indexx = indexx < 0 ? li_length - 1 : indexx;
        }else if (event.keyCode == 40){
            indexx++;
            indexx = indexx > li_length - 1 ? 0 : indexx;
        }else if(event.keyCode == 13){
            $(this).val($("#g2 li:eq("+indexx+")").html());
            $("#g2").css({'display':"none"});
        }
        console.log(indexx);
        $("#g2 li:eq("+indexx+")").addClass('activee');

    });
    $(div).blur(function(){
        $("#g2").css({'opacity':'0'});
        setTimeout(function(){
              $("#g2").css({'display':"none"});
        },1000);
    });

 

 

三、這個時候我們可以模擬一些數據，我當時模擬了10萬條數據來測試該功能

//模擬假數據數組
    var mycheck1=new Array();
    for (var i = 0; i < 100000; i++) {
        mycheck1[i] = i;
    };
    var domid = "#check";
    //自定義封裝下拉檢索方法（可各種地方復用）
    getcheck(mycheck1,domid);

大數據核心處理模塊在第一段代碼其實已經貼出來了，如下所示，我們可以先將數據封裝在一個自定義數組中，然后針對數據中塞帶<li>標簽的字符串，最終逐段拼接在原先的ul后面，設置一個計時器，每50ms就顯示一次，這樣會存在一個小的缺陷，滾動條會慢慢拉動，因為數據一直在加載，這樣用戶體驗就很不錯了。

var strli = "";
                    var lenflag = 0;
                    var jslen = jsdata.length;
                    var mycars = "";
                    //懶加載主要核心點
                    setint = setInterval(function(){
                        for(var i =0;i<1000;i++){
                            if(lenflag<jslen){
                                mycars+="<li  style=\"width:100%;float:left;line-height:"+domHig+"px;height:"+domHig+"px;cursor:pointer;\">"+jsdata[lenflag]+"</li>"
                                lenflag++;
                                linum++;
                            }else{
                                break;
                            }

                        }
                        romanceLi(mycars,linum,domHig,div,indexx);
                        if(lenflag==jslen){
                            clearInterval(setint);
                            romanceLi(mycars,linum,domHig,div,indexx);
                        }
                    },50);

 

有需要實際例子demo的歡迎留言。