項目最佳化經驗分享（二）自動查詢

    上一篇部落格我們分享了搜尋方塊最佳化經驗《資料自動匹配》。今天我們來分享一下時間控制經驗：自動查詢！

引言：

    大家在網上購買火車票的時候，肯定用過12306這項功能，設定好條件，勾選“開啟自動查詢”，這時如果點擊“查詢”按鈕，則會進入自動查詢，並顯示倒計時重新整理時間，直到有滿足條件的列車停止，如：

    當我們的項目也需要不斷查詢，即時重新整理顯示新的資料時，比如，大學生每年要進行選修課網選，他們需要不斷地查詢選修課，即時更新可選選修課名稱，選修課剩餘容量等等，這時我們就可以借鑒提供這樣的功能，給使用者更高的體驗度！下面我們來看看具體的實現吧：

思路：

1.提供時間控制功能，即倒計時功能；

2.時間控制功能和查詢功能進行關聯；

實現：

1.倒計時功能可以有多種實現方式，最簡單的方式是使用timer控制項（簡單不做詳細介紹），這裡提供的是js實現方式，主要利用了時間間隔建立函數setInterval()。下面是js實現倒計時的一個小demo：

<title>JS的setInterval()實現倒計時特效代碼</title><script>function dtime(i){var oBody = document.getElementById('shu');var i=i;setInterval(updateNum, 1000);//倒計時為1000為1秒間隔，每秒倒計時，動態秒數        updateNum(); function updateNum(){oBody.innerHTML = i--;                if(oBody.innerHTML<0){                     oBody.innerHTML=0;                }}}</script><button id='an' onclick='dtime(10);'>查詢</button><button id='shu' >num</button>

提示：如需終止時間間隔，可使用函數clearInterval（）。

2.執行個體：學生選課自動查詢和自動認可

定義自動查詢函數autoQuery（）

 //定義變數times，用作倒計時        var times_query        var timeID;        function autoQuery(){             times_query=$("#daojishi").html();            if (times_query>0){                $("#daojishi").html(times_query-1);            }else{                clearInterval(timeID); //終止計時器                $("#daojishi").html(5); //重設倒計時為5                getCourse(); //調用getCourse()函數 擷取課程資訊            }        }       

定義查詢課程函數getCourse（），查詢課程，並顯示

function getCourse() {            //清空原有的資料            ……            //如果選中“餘量優先”，普通選課，未開啟自動查詢            if($("#chkLeftFirst").attr("checked")){                ……            }            else{                //如果開啟了“自動查詢”                if ($("#chkOpenAutoQuery").attr("checked")) {                    //如果開啟了“自動認可”                    if ($("#chkAutoSubmit").attr("checked" )) {                                                      //自動查詢、自動認可都選中                        //調用RobCourse.js檔案中的函數setFirst(),根據設定的優先條件查詢課程                             var resText=setFirst();                               if (resText==undefined || resText=="") {                            //將“查詢”按鈕變為“停止自動查詢”按鈕                            ……                            //開啟自動查詢定時器                            timeID=setInterval("autoQuery()","1000");                            return;                        }                        //調用函數showCourses(),在頁面上顯示查詢到的課程                        showCourses(resText);                        //將“停止自動查詢”按鈕變為“查詢”按鈕                        ……                        //終止定時器                        clearInterval(timeID);                        //將倒計時值歸為5                        $("#daojishi").html(5);                        //調快速選課(RobCourse.js)函數，提交課程                         chooseCourseFast('<%=Session["StudentID"]%>');                                                       }else{                        //自動查詢選中；自動認可未選中                        ……                                  }                                                     //調用RobCourse.js檔案中的函數setFirst(),根據設定的優先條件查詢課程                         var resText=setFirst()                                   ……                          //開啟定時器 timeID=setInterval("autoQuery()","1000"); return; }                          showCourses(resText);                          //將“停止自動查詢按鈕”改為“查詢”按鈕                           ……                           //終止定時器 clearInterval(timeID);                           $("#daojishi").html(5);                           }                           } else { //終止定時器 clearInterval(timeID);                    …… } } }

定義顯示課程函數showCourses()，將查詢出來的課程顯示出來，注意轉換json格式：

function showCourses(resText)        {           ……        }

定義函數chkOpenAutoQuery_onChange(),用於關聯自動查詢複選框變化：

function chkOpenAutoQuery_onChange(){            if (!($("#chkOpenAutoQuery").attr("checked"))) {                if ($("#chkAutoSubmit").attr("checked")) {                    //取消自動認可                    $("#chkAutoSubmit").removeAttr("checked");                }                                 clearInterval(timeID);                $("#daojishi").html(5);                return;            }        }

效果：

總結：    從使用者角度出發，以使用者為主，越靠近使用者的使用習慣，軟體親和力越高，開發的軟體越受歡迎！