setTimeout與setInterval實戰之定時刷新

仍然是上次的考試系統中在考生界面那一欄需要實現定時刷新，以保證信息的及時反饋，當時也沒有什么好的實現方式，就使用了ajax+setTimeout來實現了，

先來說下setTimeout與setInterval的使用與區別：

使用：就是直接在js中調用這兩個方法就可以了，這是window對象有兩個主要的定時方法，表達式粉分別為

setTimeout (表達式,延時時間)；
setInterval(表達式,交互時間)；
延時時間/交互時間是以豪秒為單位的(1000ms=1s)

兩種的表達式很相似，但功能還是有很大的區別的，從參數的表達也能看出：
setTimeout  在執行時,是在載入后延遲指定時間后,去執行一次表達式,僅執行一次
setInterval 在執行時,它從載入后,每隔指定的時間就執行一次表達式

那么使用之后如何將其清除呢：可以使用下面的方法，由於每次調用這兩個方法后都有一個唯一的id進行返回，因此我們只要根據這個唯一的id來將其清除即可

如：var id = setTimeout(show() ,1000);

　　clearTimeout(id);

如：var id=setInterval(show(),1000);

　　clearInteval(id);

 

 

實戰頁面：

這里使用的是復選框進行勾選來表示是否需要進行20秒自動刷新，頁面打開時是默認為選中狀態，即定時刷新

實現方案是：在頁面加載時調用timingRefresh()方法，

<script type="text/javascript" language="javascript">
  $(document).ready(function() {
      //if($("#shuaxin").attr("checked") == true){
          //alert("選中");
          timingRefresh();                //表示是選擇狀態
          //未完待續
      //}else{
          //alert(未選中);
      //}
  });
  </script>

timingRefresh()實現：

 //頁面的定時刷新
 var timeID;                //這個是定時器返回的id，必須設置為全局變量，否則不能正確取消        
 function timingRefresh(){
     window.clearTimeout(timeID);                                    //每次調用該方法前先將原先那個定時器取消
     if($("#shuaxin").attr("checked") == true){
         /**
          * 在這個環境下還是用setTimeout合適，以為頁面端會有一個js函數在頁面加載完后調用該函數的，
          * 如果選用window.setInterval，那么每次重載后都會出現一個對象，這個就會無法控制了，而
          * setTimeout函數繼續完此次后就結束了，重載后又出現一個，用在這里非常合適
          * */
         timeID = setTimeout("examineeSearch(1, 'examineeListAction.action')", 20000);            //只是過20秒后刷新一次就結束了    
         //timeID = window.setInterval("examineeSearch(1, 'examineeListAction.action')", 5000);            //每5秒自動刷新一次
     }else{
         //alert("設置為false");
         //window.clearInterval(timeID);                                //取消刷新
         window.clearTimeout(timeID);
     }
 }

大家可以好好的琢磨下上面的實現方法：我選擇了setTimeout（）方法而非setInterval（）；原因就是我每次頁面加載完后都會來調用這個方法，然后判斷是否復選框被選擇
如果被選擇了，就設定20秒后進行刷新，只刷新一次，如果采用沒20秒刷新一個的話，那么每次頁面加載完后我調用該方法后，其實是又一次的調用了setInterval（），那么

幾次頁面刷新后，其實已經產生了n多個timeID了，每個timeID在20秒后都執行一次刷新，那后果可想而知，因此以后大家在使用這兩個函數時必須要根據實際情況進行選定，

而不能一味根據函數的定義進行選擇。

還有這個方法里面調用的ajax方法我也一並寫出來了，大家如果對ajax的實現有問題，可以看http://www.cnblogs.com/shenliang123/archive/2012/04/16/2452670.html

//頁面的查詢功能
 function examineeSearch(type, tagAction){
     if(type == 0){                                        //表示要顯示刷新的標准
         var jiazai = document.getElementById("jiazai");//顯示加載標志符
     }
    var claId = $("#claId").val();                        //班級id
    var examId = $("#examId").val();                    //考試的id
    var examineeStatus = $("#examineeStatus").val();    //考試的狀態
    var subjectiveStatus = $("#subjectiveStatus").val();//主觀題的批閱情況
    var resultOrder = $("#resultOrder").val();            //成績排序
    var content = $("#searchinput").val();                //查詢的內容
    if(content == "- - -學號|IP關鍵字- - -"){
        content = 0;
    }
    //alert(claId);
    //alert(claId+examId+examineeStatus+subjectiveStatus+resultOrder+content);
    $("#middle").load(tagAction,{
            sendTime: (new Date()).getTime(),
            claId: claId,
            examId: examId,
            examineeStatus: examineeStatus,
            subjectiveStatus: subjectiveStatus,
            resultOrder: resultOrder,
            content: content
    });
    jiazai.innerHTML += "已成功刷新";
 }

這里的ajax是機遇struts2的，實現比較簡單