項目中有需要實時監測用戶的輸入,這裏用到了JS的定時器來控制。
關於setInterval
setInterval動作的作用是在播放動畫的時,每隔一定時間就調用函數,方法或對象。可以使用本動作更新來自數據庫的變量或更新時間顯示。setInterval動作的語法格式如下:
setInterval(function,interval[,arg1,arg2,......argn]) //標準動作面板中setInterval函數的默認語法
setInterval(object,methodName,interval[,arg1,arg2,.....argn])//在專家模式動作中使用的方法
setInterval(object,methodName,interval[,arg1,arg2,.....argn])//在專家模式動作中使用的方法
參數:
function 參數是一個函數名或者一個對匿名函數的引用。
object 參數指定從 Object 對象派生的對象。
methodName 制定 object 參數中要調用的方法。
interval制定對function或methodName調用兩次之間的時間,單位是毫秒。
arg1等是可選的參數,用於制定傳遞給function或是methodName的參數。
setInterval 設置的時間間隔小於動畫幀速(如每秒10幀,相當於100毫秒),則按照儘可能接近interval的時間間隔調用函數。而且必須使用updateAfterEvent動作來確保以足夠的頻率刷新屏幕。如果interval大於動畫幀速,則只用在每次播放頭進入某一幀是才調用,以減小每次刷新屏幕的影響。
下面是一個小例子,一般的定時器需要STOP,但是如果放在onfocus事件中,就可以做成有良好的用戶體驗實時監測了。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Demo</title>
<script language="JavaScript" type="text/javascript">
var second=5000; //間隔時間5秒鐘
var c=0;
function scroll() {
c++;
if ("b" == document.activeElement.id) {
var str="定時檢查第<b> "+c+" </b>次<br/>";
if(document.getElementById('b').value!=""){
str+="輸入框當前內容爲當前內容爲<br/><b> "+document.getElementById('b').value+"</b>";
}
document.getElementById('word').innerHTML = str;
}
}
</script>
</head>
<body>
<textarea id="b" name="b" style="height:100px; width:300px;" onfocus="setInterval('scroll()',second)"></textarea><br/><br/>
<div id="word"></div><br/><br/>
</body>
</html>