JavaScript 时间间隔
在Web开发中,处理时间和时间间隔是一项常见任务。无论是创建倒计时、设置定期执行的任务,还是计算两个日期之间的差异,JavaScript都提供了多种方式来处理时间间隔。
什么是时间间隔?
时间间隔指的是两个时间点之间的差异,或者是设定在特定时间后执行某些操作。在JavaScript中,我们主要通过以下几种方式来处理时间间隔:
- 使用
setTimeout
和setInterval
函数设置延时执行 - 使用
Date
对象计算时间差 - 使用现代API 如
performance.now()
精确测量代码执行时间
setTimeout 和 clearTimeout
setTimeout
是JavaScript中最基本的时间延迟执行函数,它允许我们在指定的时间后执行一次回调函数。
基本语法
const timeoutId = setTimeout(callback, delay, param1, param2, ...);
callback
: 延迟执行的函数delay
: 延迟的毫秒数param1, param2, ...
: 可选参数,传递给回调函数
示例:基本延时执行
console.log("开始");
setTimeout(() => {
console.log("3秒后执行");
}, 3000);
console.log("代码继续执行");
输出结果:
开始
代码继续执行
(3秒后)
3秒后执行
备注
setTimeout
是非阻塞的,这意味着JavaScript不会等待延时结束才继续执行后面的代码。
取消定时器
我们可以使用clearTimeout
函数取消一个尚未执行的定时器:
const timerId = setTimeout(() => {
console.log("这条消息不会显示");
}, 3000);
// 在定时器触发前取消它
clearTimeout(timerId);
setInterval 和 clearInterval
setInterval
函数用于按照指定的时间间隔重复执行一个函数,直到被取消。
基本语法
const intervalId = setInterval(callback, delay, param1, param2, ...);
示例:创建一个简单的计时器
let count = 0;
const intervalId = setInterval(() => {
count++;
console.log(`已经过去${count}秒`);
if (count >= 5) {
clearInterval(intervalId);
console.log("计时器已停止");
}
}, 1000);
输出结果:
已经过去1秒
已经过去2秒
已经过去3秒
已经过去4秒
已经过去5秒
计时器已停止
警告
过多的setInterval
调用可能会导致性能问题。在不需要时,记得使用clearInterval
清除定时器。