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

169 浏览量更新于2024-08-28 收藏 79KB PDF 举报

本文主要介绍了JavaScript中的计时器对象，它是JavaScript编程中一个重要的工具，用于在特定的时间间隔后执行预定义的代码。计时器分为两种类型： 1. 一次性计时器：这种计时器只会在设置的时间点触发一次。它们不适用于需要持续执行的任务，而是一次性的动作执行。 2. 间隔性触发计时器：这是最常见的计时器类型，通过`setInterval()`函数实现。这个函数在页面加载后按照指定的时间间隔（以毫秒为单位）重复执行提供的代码块。例如，`setInterval("clock()", 1000)` 或 `setInterval(clock, 1000)`，这里假设有一个名为`clock()`的函数，每秒钟更新显示当前时间。 `setInterval()`函数的语法如下： ```javascript setInterval(代码, 交互时间); ``` 其中，`代码`是要执行的函数或字符串，`交互时间`是周期执行之间的延迟，通常以毫秒为单位。该函数会返回一个唯一标识符，这个标识符可以用来通过`clearInterval()`方法停止定时器。 `clearInterval()`是用于取消之前通过`setInterval()`设置的定时器的方法，其语法是： ```javascript clearInterval(id_of_setInterval); ``` 其中，`id_of_setInterval`是之前`setInterval()`返回的值。通过这个ID，我们可以准确地找到并停止相应的计时任务，避免无用的执行循环。以下是一个简单的HTML和JavaScript示例，展示了如何创建一个计时器，显示当前时间，并在1秒后更新： ```html <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>计时器示例</title> <script type="text/javascript"> var intervalId = setInterval(clock, 1000); // 设置计时器 function clock() { var time = new Date(); document.getElementById("clock").value = time; } // 示例：停止计时器 function stopClock() { clearInterval(intervalId); } </script> </head> <body> <form> <input type="text" id="clock" size="50"> <button onclick="stopClock()">停止计时</button> </form> </body> </html> ``` 在这个例子中，用户可以通过点击按钮来调用`stopClock()`函数，从而停止计时器的执行。 JavaScript计时器是网页开发中不可或缺的工具，它们用于实现动画效果、定时刷新数据等功能。理解并熟练使用计时器，可以极大地提高JavaScript应用程序的动态性和用户体验。

浅谈浅谈JavaScript的计时器对象的计时器对象

1、、JavaScript计时器，我们可以在设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。计时器，我们可以在设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。

计时器类型：计时器类型：

1）一次性计时器：仅在指定的延迟时间之后触发一次。

2）间隔性触发计时器：每隔一定的时间间隔就触发一次。

计时器方法：计时器方法：

1）setInterval() :在执行时,从载入页面后每隔指定的时间执行代码。

//语法

setInterval(代码,交互时间);

//参数说明：1. 代码：要调用的函数或要执行的代码串。2. 交互时间：周期性执行或调用表达式之间的时间间隔，以毫秒计

（1s=1000ms）。

//返回值:一个可以传递给 clearInterval() 从而取消对"代码"的周期性执行的值。

//调用函数格式：(假设有一个clock()函数):

setInterval("clock()",1000)

//或

setInterval(clock,1000)

//例子

<!DOCTYPE HTML>

<html>

<head>

var int=setInterval(clock, 1000)//调用计时器

function clock(){

var time=new Date();

document.getElementById("clock").value = time;

}

</script>

</head>

<body>

<form>

</form>

</body>

</html>

2）取消计时器clearInterval()：clearInterval() 方法可取消由 setInterval() 设置的交互时间。

//语法

clearInterval(id_of_setInterval)

//参数说明:id_of_setInterval：由 setInterval() 返回的 ID 值。

//例子

<!DOCTYPE HTML>

<html>

<head>

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

weixin_38570278

粉丝: 4
资源: 978

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

浅谈javascript面向对象编程

javascript秒表计时器

浅谈javascript构造函数与实例化对象

ko-Timer:一个可以绑定到任何 DOM 对象的 Javascript 计时器

JavaScript面向对象编程指南.pdf

使用JavaScript实现计时器功能

使用JavaScript构建秒表计时器

使用JavaScript实现倒计时器

JavaScript BOM计时器趣味案例代码解析

JavaScript实现魔法师倒数计时器教程

最新资源