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的，实现比较简单