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>

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