仍然是上次的考试系统中在考生界面那一栏需要实现定时刷新，以保证信息的及时反馈，当时也没有什么好的实现方式，就使用了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的，实现比较简单