《深入理解 JavaScript 中的定时器》
目录
一、setInterval () 函数
二、setTimeout () 函数
三、结合使用的技巧
一、setInterval () 函数
setInterval()是一个周期函数，它会在指定的时间间隔后重复执行指定的函数。
var i = 0;
var hh = function() {if (i == 10) {clearInterval(timer);}console.log(i++);
};
var timer = setInterval(hh, 1000);
在这个例子中，函数hh会每隔 1 秒（1000 毫秒）执行一次，直到i的值达到 10，然后通过clearInterval(timer)停止定时器。
二、setTimeout () 函数
setTimeout()是一个延迟定时器，它会在指定的时间后执行一次指定的函数。
var i = 0;
setTimeout(function() {console.log(i++);
}, 4000);
在这个示例中，函数会在 4 秒后执行一次。
三、结合使用的技巧
我们还可以结合setTimeout()来实现类似setInterval()的效果，同时在特定条件下停止执行。
var i = 0;
var hh = function() {console.log(i++)timer = setTimeout(hh, 1000);console.log("timer 值为：" + timer);if (i == 10) {console.log("停止的 timer 值为：" + timer);clearTimeout(timer);}
};
var timer = setTimeout(hh, 1000);
四、一个实际案例
以下是一个在网页中应用定时器的例子：
<!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>
在这个案例中，点击 “开始” 按钮，通过setInterval()函数每隔 10 毫秒改变一个圆形元素的背景颜色的渐变角度，点击 “结束” 按钮则通过clearInterval()停止这个过程。