JS定時器的使用 setInterval()的用法

項目中有需要實時監測用戶的輸入,這裏用到了JS的定時器來控制。

關於setInterval

setInterval動作的作用是在播放動畫的時,每隔一定時間就調用函數,方法或對象。可以使用本動作更新來自數據庫的變量或更新時間顯示。setInterval動作的語法格式如下:

setInterval(function,interval[,arg1,arg2,......argn]) //標準動作面板中setInterval函數的默認語法

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>

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章