知识大全 JavaScript定时器详解及实例

Posted 2022-07-20 知

篇首语：搓绳不能松劲，前进不能停顿。本文由小常识网(cha138.com)小编为大家整理，主要介绍了知识大全 JavaScript定时器详解及实例相关的知识，希望对你有一定的参考价值。

JavaScript定时器详解及实例 以下文字资料是由(全榜网网www.cha138.com)小编为大家搜集整理后发布的内容，让我们赶快一起来看一下吧！

这篇文章详细介绍了JavaScript定时器及实例有需要要的朋友可以参考一下

　　JS里设定延时使用SetInterval和设定延时函数setTimeout 很类似 setTimeout 运用在延迟一段时间再进行某项操作 setTimeout("function" time) 设置一个超时对象 setInterval("function" time) 设置一个超时对象 SetInterval为自动重复 setTimeout不会重复 clearTimeout(对象) 清除已设置的setTimeout对象 clearInterval(对象) 清除已设置的setInterval对象使用定时器实现JavaScript的延期执行或重复执行 window对象提供了两个方法来实现定时器的效果分别是window setTimeout()和window setInterval 其中前者可以使一段代码在指定时间后运行而后者则可以使一段代码每过指定时间就运行一次它们的原型如下 window setTimeout(expression milliseconds); window setInterval(expression milliseconds); 其中 expression可以是用引号括起来的一段代码也可以是一个函数名到了指定的时间系统便会自动调用该函数当使用函数名作为调用句柄时不能带有任何参数而使用字符串时则可以在其中写入要传递的参数两个方法的第二个参数是milliseconds 表示延时或者重复执行的毫秒数下面分别介绍两种方法．window setTimeout方法该方法可以延时执行一个函数例如

复制代码代码如下: <script language="JavaScript" type=text/javascript> <! function hello() alert("hello"); window setTimeout(hello ); // > </script>

　　这段代码将使得页面打开秒钟后显示对话框“hello” 其中最后一句也可以写为

复制代码代码如下: window setTimeout("hello()" );

　　读者可以体会它们的差别在window setInterval方法中也有这样的性质如果在延时期限到达之前取消延执行可以使用window clearTimeout(timeoutId)方法该方法接收一个id 表示一个定时器这个id是由setTimeout方法返回的例如

复制代码代码如下: <script language="JavaScript" type=text/javascript> <! function hello() alert("hello"); var id=window setTimeout(hello ); document onclick=function() window clearTimeout(id); // > </script>

　　这样如果要取消显示只需单击页面任何一部分就执行了window clearTimeout方法使得超时操作被取消．window setInterval方法该方法使得一个函数每隔固定时间被调用一次是一个很常用的方法如果想要取消定时执行和clearTimeout方法类似可以调用 window clearInterval方法 clearInterval方法同样接收一个setInterval方法返回的值作为参数例如

复制代码代码如下: //定义一个反复执行的调用 var id=window setInterval("somefunction" ); //取消定时执行 window clearInterval(id);

　　上面的代码仅用于说明怎样取消一个定时执行实际上在很多场合都需要用到setInterval方法下面将设计一个秒表来介绍setInterval 函数的用途该秒表将包括两个按钮和一个用于显示时间的文本框当单击开始按钮时开始计时最小单位为秒此时再次单击按钮则停止计时文本框显示经过的时间另外一个按钮用于将当前时间清零其实现代码如下

复制代码代码如下: <!DOCTYPE HTML PUBLIC " //W C//DTD HTML Transitional//EN"> <> <head> <title> New Document </title> </head> <body> <form action="somepage asp"> <input type=text value=" " name=txt /> <input type=button value="开始" name=btnStart/> <input type=button value="重置" name=btnReset/> </form> </body> </> <script language="JavaScript" type=text/javascript> <! //获取表单中的表单域 var txt=document forms[ ] elements["txt "]; var btnStart=document forms[ ] elements["btnStart"]; var btnReset=document forms[ ] elements["btnReset"] //定义定时器的id var id; //每毫秒该值增加 var seed= ; btnStart onclick=function() //根据按钮文本来判断当前操作 if(this value=="开始") //使按钮文本变为停止 this value="停止"; //使重置按钮不可用 btnReset disabled //设置定时器每 s跳一次 id=window setInterval(tip ); else //使按钮文本变为开始 this value="开始"; //使重置按钮可用 btnReset disabled //取消定时 window clearInterval(id); //重置按钮 btnReset onclick=function() seed= ; //让秒表跳一格 function tip() seed++; txt value=seed/ ; // > </script>

　　给定时器调用传递参数无论是window setTimeout还是window setInterval 在使用函数名作为调用句柄时都不能带参数而在许多场合必须要带参数这就需要想方法解决例如对于函数hello(_name) 它用于针对用户名显示欢迎信息

复制代码代码如下: var userName="jack"; //根据用户名显示欢迎信息 function hello(_name) alert("hello "+_name);

　　这时如果企图使用以下语句来使hello函数延迟秒执行是不可行的

复制代码代码如下: window setTimeout(hello(userName) );

　　这将使hello函数立即执行并将返回值作为调用句柄传递给setTimeout函数其结果并不是程序需要的而使用字符串形式可以达到想要的结果

复制代码代码如下: window setTimeout("hello(userName)" );

　　这里的字符串是一段JavaScript代码其中的userName表示的是变量但这种写法不够直观而且有些场合必须使用函数名下面用一个小技巧来实现带参数函数的调用

复制代码代码如下: <script language="JavaScript" type=text/javascript> <! var userName="jack"; //根据用户名显示欢迎信息 function hello(_name) alert("hello "+_name); //创建一个函数用于返回一个无参数函数 function _hello(_name) return function() hello(_name); window setTimeout(_hello(userName) ); // > </script>

　　这里定义了一个函数_hello 用于接收一个参数并返回一个不带参数的函数在这个函数内部使用了外部函数的参数从而对其调用不需要使用参数在 window setTimeout函数中使用_hello(userName)来返回一个不带参数的函数句柄从而实现了参数传递的功能 window对象有两个主要的定时方法分别是setTimeout 和 setInteval 他们的语法基本上相同但是完成的功能取有区别 setTimeout方法是定时程序也就是在什么时间以后干什么干完了就拉倒 setInterval方法则是表示间隔一定时间反复执行某操作 JS里设定延时使用SetInterval和设定延时函数setTimeout 很类似 setTimeout 运用在延迟一段时间再进行某项操作 setTimeout("function" time) 设置一个超时对象 setInterval("function" time) 设置一个超时对象 SetInterval为自动重复 setTimeout不会重复 clearTimeout(对象) 清除已设置的setTimeout对象 clearInterval(对象) 清除已设置的setInterval对象如果用setTimeout实现setInerval的功能就需要在执行的程序中再定时调用自己才行如果要清除计数器需要根据使用的方法不同调用不同的清除方法例如

复制代码代码如下: tttt=setTimeout( northsnow() ); clearTimeout(tttt);

　　或者

复制代码代码如下: tttt=setInterval( northsnow() ); clearInteval(tttt);

　　举一个例子

复制代码代码如下: <div id="liujincai"></div> <input type=button name=start value="start" onclick= startShow(); > <input type=button name=stop value="stop" onclick="stop();"> <script language="javascript"> var intvalue= ; var timer =null; function startShow() liujincai innerHTML=liujincai innerHTML + " " + (intvalue ++) toString(); timer =window setTimeout("startShow()" ); function stop() window clearTimeout(timer ); </script>

　　或者

复制代码代码如下: cha138/Article/program/Java/JSP/201311/20185