JavaScript--定时事件

Onlooker﹒

已于 2023-08-02 16:23:24 修改

阅读量660

点赞数 2

分类专栏： JavaScript 文章标签： javascript 开发语言

于 2023-07-16 17:20:49 首次发布

本文链接：https://blog.csdn.net/m0_74293254/article/details/131751369

版权

JavaScript 专栏收录该内容

40 篇文章 2 订阅

订阅专栏

1.setTimeout() 方法：延时器

setTimeout(function, milliseconds)：

功能：在等待指定的毫秒数后执行一次指定的函数。
清除延时器：clearTimeout();
参数：
- function：要执行的函数或代码块。
- milliseconds：等待的时间长度，以毫秒为单位。

示例代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<button id="b">按钮</button>

<script>
    var l = document.getElementById("b");

    l.onclick = function () {
        // 创建延时器
        var timer = setTimeout(function () {
            console.log("Hello");
        }, 3000);
        
        // 清除延时器
        // clearTimeout(timer);        
    };
</script>
</body>
</html>

2.setInterval() 方法：定时器

setInterval(function, milliseconds)：

功能：与 setTimeout 类似，但会循环执行指定的函数，每隔指定的毫秒数执行一次。
需要注意的是，使用 setInterval() 方法时要小心，确保在适当的时候清除计时器，否则会导致函数无限循环执行。可以使用 clearInterval() 方法来取消 setInterval() 创建的计时器。
参数：
- function：要执行的函数或代码块。
- milliseconds：执行函数的间隔时间长度，以毫秒为单位。

示例代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<button id="b">按钮</button>

<script>
    var l = document.getElementById("b");

    l.onclick = function () {
        // 创建定时器
        var timer = setInterval(function () {
            console.log("Hello");
        }, 1000);

        // 清除定时器
        // clearInterval(timer);
    };
</script>
</body>
</html>

这两个定时器方法通常用于需要在一定延迟后执行某个操作或定期重复执行某个动作的场景，如页面动画、定时更新数据等。

需要注意的是，在使用定时器时，可以使用返回的计时器 ID（timeoutID 或 intervalID）来清除定时器，以停止定时器的进一步执行。可以使用 clearTimeout(timeoutID) 或 clearInterval(intervalID) 方法来清除对应的定时器。

案例演示：

<!DOCTYPE html>
<html>
	<head>
		<title>JavaScript定时方法示例</title>
		<script>
			window.onload = function() {
				// 定义2个全局变量来存储延时器和定时器
				var timer;
				var intervalTimer;

				timer = setTimeout(function() {
					document.title = "新标题";
				}, 3000);

				intervalTimer = setInterval(function() {
					var date = new Date();
					var time = date.toLocaleTimeString();
					document.getElementById("time").innerHTML = "当前时间：" + time;
				}, 1000);

				// 取消延时器的函数
				function cancelTimer() {
					clearTimeout(timer);
					alert("延时器已取消！");
				}

				// 停止定时器的函数
				function stopInterval() {
					clearInterval(intervalTimer);
					alert("定时器已停止！");
				}

				// 点击按钮调用取消延时器函数
				document.getElementById("cancelButton").addEventListener("click", cancelTimer);
				document.getElementById("stopButton").addEventListener("click", stopInterval);
			};
		</script>
	</head>
	<body>
		<h1>JavaScript定时方法示例</h1>
		<p>
		<div id="time"></div>
		</p>
		<button id="cancelButton">取消延时器</button>

		<button id="stopButton">停止定时器</button>

	</body>
</html>

运行这段代码，它将在页面加载完成后设置一个延时器，在3秒后将文档标题更改为"新标题"。同时，它还设置了一个定时器，每隔1秒更新显示当前时间的元素。

如果单击"取消延时器"按钮，将会清除延时器并弹出一个提示消息。而点击"停止定时器"按钮，则会清除定时器并显示一个提示消息。