JavaScript定时器中Item23的合理使用

在javascritp中，有两个关于计时器的特殊函数。它们是：

1.倒计时定时器：time name=setTimeout(' function()；'。delay time)；2.循环计时器：time name=SetInterval(' function()；'，delay time)；

1.计时器概述。

window对象提供了两种实现定时器效果的方法，即window.setTimeout()和window.setInterval.前者可以使一段代码在指定时间后运行；而后者可以让一段代码每隔指定时间运行一次。它们的原型如下：

window.setTimeout(表达式，毫秒)；window.setInterval(表达式，毫秒)；其中，表达式可以是一段用引号括起来的代码，也可以是一个函数名，系统会在指定的时间自动调用。当函数名用作调用句柄时，它不能接受任何参数。使用字符串时，可以编写要在其中传递的参数。这两个方法的第二个参数是毫秒，它指示延迟或重复执行的毫秒数。下面分别介绍两种方法。

设置间隔类似于设置延迟函数setTimeout。SetTimeout用于在执行操作之前延迟一段时间。

SetTimeout('function，time)设置超时对象setInterval('function，time)设置超时对象setInterval自动重复，SetTimeout不会重复。

ClearTimeout(对象)清除set setTimeout对象clearInterval(对象)清除set setInterval对象。定时器用于实现JavaScript的延迟或重复执行。

2.具体用途。

1.window.settimeout方法。

此方法会延迟函数的执行，例如：

函数hello(){ alert(' hello ')；} window.setTimeout(hello，5000)；此代码将导致在页面打开5秒钟后显示对话框“hello”。最后一句也可以写成：

window.setTimeout('hello()'，5000)；读者可以体会到它们的不同，window.setInterval的方法也有这样的属性。

如果延迟执行在延迟截止日期之前被取消，可以使用window.clearTimeout(timeoutId)方法，该方法接收一个指示计时器的Id。该id由setTimeout方法返回，例如：

函数hello(){ alert(' hello ')；} var id=window.setTimeout(hello，5000)；document . onclick=function(){ window . cleartime out(id)；}这样，如果想取消显示，只需点击页面的任意部分，然后执行window.clearTimeout方法，这样超时操作就取消了。

2.窗户。setinterval方法

这个方法使得一个函数每隔固定的时间被调用一次，这是一个非常常见的方法。如果您想取消计划的执行，比如clearTimeout方法，您可以调用window.clearInterval方法。ClearInterval方法还接收setInterval方法返回的值作为参数。例如：

//定义重复调用var id=window . set interval(' some function '，10000)；//定期取消执行window . clearinterval(id)；3.演示练习。

以上代码仅用于解释如何取消计划的执行。实际上，setInterval方法在很多场合都有使用。将设计一个秒表来介绍设置间隔功能的用途。秒表将包括两个按钮和一个显示时间的文本框。单击开始按钮时，计时开始，最小单位为0.01秒。再次单击按钮停止计时，文本框显示经过的时间。另一个按钮用于将当前时间重置为零。实现代码如下：

html标题新建文档/标题/标题正文表单操作='somepage.asp '输入类型='text '值='0 '名称='txt1'/Type=' button '值=' start '名称=' btnstart'/type=' button '值=' reset '名称=' btnreset'/表单/正文/htmlscript语言=' JavaScript '类型=' text/JavaScript '！-//获取表单字段vartxt=document.forms [0]。表单中的元素[' txt 1 ']；var btnStart=document.forms[0]。元素[' bStstart ']；Varbtnreset=document.forms [0]。elements[' BTN reset ']//定义定时器的id var id//每10ms，值增加1 var seed=0；bn start . onclick=function(){//根据按钮文本判断当前操作if(this . value==' start '){//使按钮文本stop this.value=' stop//使复位按钮不可用btnReset.disabled=true//设置定时器，每0.01s跳转一次id=window.setInterval(tip，10)；}else{ //使按钮文本开始this.value=' start//使复位按钮可用btnReset.disabled=false//取消计时窗口. clearinterval(id)；} }//重置按钮BTN reset . onclick=function(){ seed=0；}//让秒表跳一个平方的函数提示(){ seedtxt . value=seed/100；}////script 3。将参数传递给计时器调用。

无论是window.setTimeout还是window.setInterval在使用函数名作为调用句柄的时候都不能取参数，但是在很多场合都必须取参数，所以我们需要寻找解决方案。例如，对于函数hello(_name)，它用于显示用户名的欢迎信息：

var userName=' jack//根据用户名，显示欢迎消息功能hello (_ name) {alert ('hello，' _ name)；}此时，使用以下语句将hello函数的执行延迟3秒是不可行的：

window . settimeout(hello(userName)，3000)；这将导致hello函数立即执行，并将返回值作为调用句柄传递给setTimeout函数，结果不是程序需要的。而使用字符串形式可以达到预期的效果：

window . settimeout(' hello(userName)'，3000)；这里的字符串是一个JavaScript代码，其中userName代表一个变量。但是这种写法不够直观，有些情况下必须使用函数名。这里有一个用参数实现函数调用的小技巧：

var userName=' jack//根据用户名，显示欢迎消息功能hello (_ name) {alert ('hello，' _ name)；}//创建函数返回无参数函数function _ hello(_ name){ return function(){ hello(_ name)；} } window . settimeout(_ hello(userName)，3000)；/script这里定义了一个function _hello，用来接收一个参数，返回一个没有参数的函数。外部函数的参数在该函数内部使用，因此可以在不使用参数的情况下调用它。在window.setTimeout函数中，_hello(userName)用来返回一个不带参数的函数句柄，从而实现参数传递的功能。

4.正确理解计时器的“计时”功能。

先看一段代码。

功能显示(){ alert(hello)；}setTimeout('display()'，3000)；警惕(‘你首先看到的是我！’)先输出哪个代码？答案在程序中显而易见。为什么呢？

初学者可能会误解Javascript的计时器，认为它们是线程。其实Javascript是单线程运行的，但是定时器只是计划在未来的某个时间执行，具体的执行时间无法保证，因为在页面生命周期的不同时间，其他代码可能会控制Javascript的内部进程。浏览器只负责排序和分配一些代码在某个时间点运行。

我们来谈谈Javascript线程。下图显示了javascript进程的时间线。

除了javascript执行进程之外，还有一个代码队列需要在进程的下一个空闲时间执行。随着页面在其生命周期中的进行，代码将根据执行顺序添加到成对的列中。例如，当按下一个按钮时，它的事件处理将被添加到队列中，并在下一个可能的时间执行。

计时器的工作模式是在经过一定时间后将代码插入队列。请注意，将其添加到队列中并不意味着它会立即执行，而只是意味着它会尽快执行。设置一个250ms后会执行的定时器，并不意味着250ms后会立即执行，只意味着250 ms后会加入队列，如果此时队列空闲，就会执行这段代码。

请看下面的代码：

var BTN=document . getelementbyid(' mybtn ')；BTN . onclick=function(){ setTimeout(function(){ document . getelementbyid(' message '))。nodeName=' mymessage//其他代码}，250)；}对于计时器来说，最重要的是指定的时间间隔指示计时器的代码何时添加到队列中，而不是代码何时执行。请参见下图了解onclick过程的时间表：