JavaScript计时器事件深度解析：setTimeout与clearTimeout

PDF文件

45KB | 更新于2024-08-30 | 46 浏览量 | 举报收藏

立即下载

“javascript计时器事件使用详解” 在JavaScript中，计时事件的使用主要涉及到两个核心函数：`setTimeout()`和`clearTimeout()`。这些函数允许开发者在特定时间间隔后执行一段代码或取消已设置的计时任务。下面将详细阐述这两个函数的用法和应用场景。 1. `setTimeout()` `setTimeout()`函数用于在指定的毫秒数后执行一个函数或者一段代码。其基本语法如下： ```javascript var timeoutId = setTimeout(function, delay); ``` - `function`：这是要延迟执行的函数或者是包含JavaScript语句的字符串。 - `delay`：以毫秒为单位的时间，表示延迟多久后执行函数或代码。在使用`setTimeout()`时，它会返回一个`timeoutId`，这个ID可以用来取消相应的计时器。例如： ```javascript var t = setTimeout("alert('5 seconds!')", 5000); ``` 这段代码会在5秒钟后弹出一个警告框显示“5 seconds!”。如果需要取消这个定时器，可以使用`clearTimeout()`并传入`timeoutId`： ```javascript clearTimeout(t); ``` 2. `clearTimeout()` `clearTimeout()`函数用于取消由`setTimeout()`设置的计时器。它的语法非常简单： ```javascript clearTimeout(timeoutId); ``` 其中，`timeoutId`是之前`setTimeout()`返回的ID。例如： ```javascript var t = setTimeout(function() { alert('This will not be executed'); }, 1000); // After some time clearTimeout(t); ``` 在这个例子中，由于调用了`clearTimeout(t)`，所以原本计划1秒后执行的函数将不会被执行。 3. 示例应用 - 定时消息展示一个简单的示例是，当用户点击按钮时，5秒后弹出一个警告框。HTML 和 JavaScript 如下： ```html <html> <head> <script type="text/javascript"> function timedMsg() { setTimeout("alert('5 seconds!')", 5000); } </script> </head> <body> <form> <input type="button" value="Display timed alert box!" onClick="timedMsg()"> </form> </body> </html> ``` - 无限循环计时器另一个例子是创建一个从0开始无限递增的计数器，每次增加1，直到用户停止。HTML 和 JavaScript 如下： ```html <html> <head> <script type="text/javascript"> var c = 0; var t; function timedCount() { document.getElementById('txt').value = c; c = c + 1; t = setTimeout("timedCount()", 1000); } </script> </head> <body> <form> <input type="button" value="Start count!" onClick="timedCount()"> <input type="text" id="txt"> </form> </body> </html> ``` 在这个例子中，点击“Start count!”按钮后，文本框中的数字每秒会增加1，直到用户手动停止计时器。总结，JavaScript的计时器事件是实现动态效果和异步操作的重要工具。通过`setTimeout()`和`clearTimeout()`，开发者可以控制代码在特定时间点的执行，从而创建丰富的用户体验和复杂的程序逻辑。