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

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

“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()`，开发者可以控制代码在特定时间点的执行，从而创建丰富的用户体验和复杂的程序逻辑。

javascript计时器事件使用详解计时器事件使用详解

在 JavaScritp 中使用计时事件是很容易的，两个关键方法是:

setTimeout()

未来的某时执行代码

clearTimeout()

取消setTimeout()

setTimeout()

语法

代码如下:

var t=setTimeout(“javascript语句”,毫秒)

setTimeout() 方法会返回某个值。在上面的语句中，值被储存在名为 t 的变量中。假如你希望取消这个 setTimeout()，你可以

使用这个变量名来指定它。

setTimeout() 的第一个参数是含有 JavaScript 语句的字符串。这个语句可能诸如 “alert(‘5 seconds!’)”，或者对函数的调用，诸

如 alertMsg()”。

第二个参数指示从当前起多少毫秒后执行第一个参数。

提示：1000 毫秒等于一秒。

当下面这个例子中的按钮被点击时，一个提示框会在5秒中后弹出。

代码如下:

<html>

<head>

function timedMsg()

{

var t=setTimeout(“alert(‘5 seconds!’)”,5000)

}

</script>

</head>

<body>

<form>

</form>

</body>

</html>

实例 – 无穷循环无穷循环

要创建一个运行于无穷循环中的计时器，我们需要编写一个函数来调用其自身。在下面的例子中，当按钮被点击后，输入域便

从 0 开始计数。

代码如下:

<html>

下载后可阅读完整内容，剩余3页未读，立即下载

weixin_38674763

粉丝: 6
资源: 967

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

详解JavaScript计时器功能：定时执行与取消

掌握JavaScript倒数计时器：js-timer使用详解

JavaScript实现基础计时器示例与代码详解

javascript计时器详解

【JavaScript源代码】详解CocosCreator中几种计时器的使用方法.docx

掌握JavaScript计时事件：setInterval与setTimeout应用详解

JavaScript实现：美化版秒表计时器代码详解

掌握JavaScript：GoIt作业11-计时器项目详解

Javascript 调试利器 Firebug使用详解六

javascript使用详解

最新资源