使用setTimeout()實現頁面自動重新整理資料
背景：前不久給一個朋友寫了一個自動重新整理頁面資料的demo,修改成html內嵌js 的檔案，這樣便於理解，需要引入的外掛有jquery 和jquery.cookie.js（用於快取頁面的使用者資料）
以下是原始碼：
<!DOCTYPE html >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>autorefresh</title>
<script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.js"></script>
<script src=" jquery.cookie.js"></script>
<style>
table, td, tr, th {
font-size: 12px;
}
.list table th {
background-color: #f2f4f6;
border-bottom: 1px solid #c1c8d2;
color: #7d7d7d;
font-weight: normal;
height: 35px;
padding-left: 5px;
/* text-align: left; */
}
.Toolbar_inbox {
background-color: #d2dbea;
border-bottom: 1px solid #c8cfda;
line-height: 26px;
overflow: hidden;
padding: 5px;
}
table, td, tr, th {
font-size: 12px;
}
.so_main {
text-align: left;
}
body {
color: #333;
font: 12px Arial,Verdana,Helvetica,sans-serif;
text-align: center;
}
</style>
</head>
<body>
<div class="list" id="list">
<table width="100%" border="0" cellspacing="0" cellpadding="0" id="tableID">
<tbody>
<tr>
<th class="line_l">作業id</th>
<th class="line_l">作業名稱</th>
<th class="line_l">作業主機</th>
<th class="line_l">註釋</th>
<th class="line_l">操作</th>
<th class="line_l"> <input type="button" class="btn_b " id="reset" value="重置"/></th>
</tr>
</tbody>
</table>
</div>
<!-- END LIST -->
</body>
</html>
<script>
$(function(){
var idlist=[];
var jsonranklist=[{"id":1,"name":"xxx","host":2,"remark":"好看類","autoflag":"false"},
{"id":2,"name":"lyjllllll","host":3,"remark":"不好看類","autoflag":"false"},
{"id":3,"name":"lyj","host":4,"remark":"好好好看類","autoflag":"false"},
{"id":5,"name":"HHHHHHHHHHHHHH","host":4,"remark":"好好好看類","autoflag":"false"},];
setData();
$(".clickBut").click(function(){
var id=$(this).attr("id");
$(this).attr({"disabled":"disabled"});
idlist.push(id);
// 設定cookie 快取自動重新整理的id
$.cookie('idlist', idlist);
return false;
});
//重置自動重新整理button
$("#reset").click(function(){
$(".clickBut").attr("disabled",false);
idlist=null;
$.cookie('idlist', null);
});
//初始化頁面賦值
function setData(){
for(var i=0;i<jsonranklist.length;i++){
$("#tableID").append(" <tr id="+jsonranklist[i].id+" >");
$("#tableID").append(" <td>"+jsonranklist[i].id+"</td>");
$("#tableID").append(" <td>"+jsonranklist[i].name+"</td>");
$("#tableID").append(" <td>"+jsonranklist[i].host+"</td>");
$("#tableID").append(" <td>"+jsonranklist[i].remark+"</td>");
$("#tableID").append(" <td> <input type= \"button\" class=\"btn_b clickBut\" value=\"自動重新整理\" id="+jsonranklist[i].id+"/> <input type= \"button\" class=\"btn_b clickBut\" value=\"手動重新整理\" id="+jsonranklist[i].id+"/> "+"</td>");
$("#tableID").append("</tr >");
}
}
//自動重新整理資料
function autoRefreshData(){
//id列表為空驗證
if(idlist==null){
alert("請選擇自動重新整理的資料");
return false;
}
if(!idlist.length==0||$.cookie('idlist')){
if(idlist.length==0){
idlist=$.cookie('idlist');
idlist.split(",");
}
for(var j=0;j<idlist.length;j++){
for(var i=0;i<jsonranklist.length;i++){
if(jsonranklist[i].id==idlist[j]){
$("table body tr[id='"+jsonranklist[i].id+"'] td").eq(0).html(jsonranklist[i].id);
$("table body tr[id='"+jsonranklist[i].id+"'] td").eq(1).html(jsonranklist[i].name);
$("table body tr[id='"+jsonranklist[i].id+"'] td").eq(2).html(jsonranklist[i].host);
$("table body tr[id='"+jsonranklist[i].id+"'] td").eq(3).html(jsonranklist[i].remark);
}
location.reload();
}
}
}
// console.log(idlist);
//設定超時
setTimeout(autoRefreshData, 5000);
}
//設定超時
setTimeout(autoRefreshData, 5000);
});
</script>