通过使用 JavaScript,我们有能力做到在一个设定的时间间隔之后来执行代码,而不是在函数被调用后立即执行。我们称之为计时事件。
在 JavaScript 中使用计时事件是很容易的,两个关键方法是:
setInterval() - 间隔指定的毫秒数不停地执行指定的代码。
setTimeout() - 在指定的毫秒数后执行指定代码。
一、setTimeout
1. 功能
setTimeout 用于在指定的延迟后执行一次指定的函数。它可以用来实现延迟执行的需求,比如在某个操作后等待一段时间再执行下一步。
2. 语法
let timeoutId = setTimeout(callback, delay, arg1, arg2, ...);
- callback: 要执行的函数。
- delay: 延迟的时间,以毫秒为单位。
- arg1, arg2, …: 可选参数,这些参数会传递给回调函数。
3 示例
console.log("Start");
setTimeout(() => {
console.log("This runs after 2 seconds");
}, 2000); // 延迟 2000 毫秒(2秒)
console.log("End");
输出:
Start
End
This runs after 2 seconds
在上述例子中,虽然 setTimeout 在最开始被调用,但它会在主线程完成当前的代码块后再执行。
4. 清除定时器
你可以使用 clearTimeout 来取消一个已经设置的定时器。
let timeoutId = setTimeout(() => {
console.log("This will not run");
}, 2000);
clearTimeout(timeoutId); // 取消定时器
二、setInterval
1. 功能
setInterval 用于在指定的时间间隔内重复执行指定的函数。它适合于需要定期更新的场景,比如定时刷新数据或动画效果。
2. 语法
let intervalId = setInterval(callback, interval, arg1, arg2, ...);
- callback: 要执行的函数。
- interval: 以毫秒为单位的时间间隔。
- arg1, arg2, …: 可选参数,传递给回调函数。
3 示例
let count = 0;
const intervalId = setInterval(() => {
count++;
console.log(`Count: ${count}`);
if (count >= 5) {
clearInterval(intervalId); // 停止定时器
console.log("Interval cleared");
}
}, 1000); // 每秒执行一次
输出:
Count: 1
Count: 2
Count: 3
Count: 4
Count: 5
Interval cleared
在这个例子中,定时器每秒增加 count 并打印,直到 count 达到 5 时停止。
4. 清除定时器
使用 clearInterval 可以停止 setInterval 创建的定时器。
const intervalId = setInterval(() => {
console.log("Repeating every second");
}, 1000);
// 当你想停止时:
clearInterval(intervalId);
三、注意事项
- 异步执行:setTimeout 和 setInterval 的回调是异步执行的,这意味着它们不会阻塞主线程。
- 时间精度:JavaScript 的计时器并不总是精确的,因为它受到事件循环和其他任务的影响。在高负载情况下可能会出现延迟。
- 闭包问题:在使用这两个函数时要注意闭包。如果在回调函数中访问外部变量,确保它们是你所期望的值。
let count = 0;
const timer = setInterval(() => {
count++;
console.log(count);
if (count === 5) {
clearInterval(timer);
}
}, 1000);
- 最大延迟:setTimeout 和 setInterval 的最大延迟是 24.8 days,超过这个时间会被重置。
四、实际应用
- 用户界面反馈:例如,在按钮点击后显示一个加载指示器,2 秒后隐藏。
- 轮询请求:使用 setInterval 定期向服务器请求数据。
- 动画效果:控制动画的帧率,例如每秒执行 60 次渲染。
- 游戏开发:控制游戏状态的更新频率。
五 区别
1. 功能
- setTimeout: 用于在指定的延迟后执行一次指定的函数。它只会运行一次。
- setInterval: 用于按指定的时间间隔重复执行指定的函数。它会持续运行,直到被清除。
2 语法
setTimeout:
let timeoutId = setTimeout(callback, delay);
setInterval:
let intervalId = setInterval(callback, interval);
3. 调用次数
- setTimeout: 仅在延迟结束后执行一次。
- setInterval: 在每个间隔结束后执行,直到显式调用 clearInterval 停止它。
4 使用场景
setTimeout:
延迟执行某个操作。
实现一次性的延时效果,例如提示框、加载动画等。
setInterval:
定期更新数据或状态,例如轮询服务器、定时器等。
创建动画效果,如每秒更新画面。
5. 清除定时器
- setTimeout: 使用 clearTimeout(timeoutId) 来取消定时器。
- setInterval: 使用 clearInterval(intervalId) 来停止定时器。
setTimeout 示例
setTimeout(() => {
console.log("Executed after 3 seconds");
}, 3000);
setInterval 示例
let count = 0;
const intervalId = setInterval(() => {
console.log(`Count: ${count}`);
count++;
if (count === 5) {
clearInterval(intervalId); // 停止定时器
}
}, 1000);
本站资源均来自互联网,仅供研究学习,禁止违法使用和商用,产生法律纠纷本站概不负责!如果侵犯了您的权益请与我们联系!
转载请注明出处: 免费源码网-免费的源码资源网站 » JavaScript 计时事件
发表评论 取消回复