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

    上一篇博客我們分享了搜索框優化經驗《數據自動匹配》。今天我們來分享一下時間控制經驗：自動查詢！

引言：

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

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

思路：

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

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

實現：

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

<span style="font-family:KaiTi_GB2312;font-size:18px;"><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' οnclick='dtime(10);'>查詢</button>
<button id='shu' >num</button></span>

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

2.實例：學生選課自動查詢和自動提交

定義自動查詢函數autoQuery（）

 <span style="white-space:pre">	</span>//定義變量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;
            }
        }

效果：

總結：

    從用戶角度出發，以用戶爲主，越靠近用戶的使用習慣，軟件親和力越高，開發的軟件越受歡迎！