目录
一、定时器的基本概念
1. setInterval
2. setTimeout
二、代码示例分析
一、定时器的基本概念
在 JavaScript 中,定时器是一种用于在特定时间间隔后执行代码或者重复执行代码的机制。主要包含两种类型的定时器:setInterval
和setTimeout
。
1. setInterval
setInterval()
是一个周期函数,它会在指定的时间间隔后,重复执行指定的函数。例如:
var i = 0;
var hh = function () {if (i == 10) {clearInterval(timer);}console.log(i++);
};
var timer = setInterval(hh, 1000);
在上述代码中,setInterval(hh, 1000)
表示每 1000 毫秒(1 秒)就会执行一次hh
函数,直到i
的值等于 10 时,通过clearInterval(timer)
停止定时器。
2. setTimeout
setTimeout()
是一个延迟定时器,它会在指定的延迟时间后执行一次指定的函数。比如:
var i = 0;
setTimeout(function () {console.log(i++);
}, 4000);
这里的代码会在 4000 毫秒(4 秒)后执行一次匿名函数。
二、代码示例分析
以下是一个更复杂的结合了 HTML 和 JavaScript 的示例:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>window.onload = function () {var container = document.querySelector(".container");var start = document.querySelector(".start");var stop = document.querySelector(".stop");var timer;// 开始var i = 0;start.onclick = function () {timer = setInterval(function () {container.style.background = "linear - gradient(" + (i++) + "deg,red,blue)";}, 10);};// 结束stop.onclick = function () {clearInterval(timer);};}</script><style>.container {width: 200px;height: 200px;border - radius: 100px;background: linear - gradient(0deg, red, blue);}input {margin: 30px;}</style>
</head>
<body><div class="container"></div><input type="button" value="开始" class="start"><input type="button" value="结束" class="stop">
</body>
</html>
- 在这个示例中,当页面加载完成(
window.onload
)后,通过document.querySelector
获取 HTML 中的元素。点击 “开始” 按钮(start.onclick
)时,启动一个setInterval
定时器,每 10 毫秒改变一次.container
元素的背景颜色渐变角度。点击 “结束” 按钮(stop.onclick
)时,使用clearInterval(timer)
停止定时器。 - 这个例子展示了定时器在实际网页开发中的应用,通过控制定时器的启动和停止,可以实现丰富的交互效果。