js实现延时
使用 setTimeout 实现延时
setTimeout 是 JavaScript 中最常用的延时方法，用于在指定的毫秒数后执行函数或代码片段。
setTimeout(() => {
console.log('这段代码将在 1 秒后执行');
}, 1000);可以传递参数给回调函数：
setTimeout((param1, param2) => {
console.log(param1, param2);
}, 1000, '参数1', '参数2');使用 async/await 实现延时
通过结合 Promise 和 async/await 可以创建更易读的延时逻辑。
function delay(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
async function delayedFunction() {
console.log('开始');
await delay(2000);
console.log('2秒后执行');
}使用 setInterval 实现循环延时
setInterval 可以按照固定的时间间隔重复执行代码。
let counter = 0;
const intervalId = setInterval(() => {
console.log(`执行第 ${++counter} 次`);
if (counter === 5) {
clearInterval(intervalId);
console.log('循环结束');
}
}, 1000);使用 requestAnimationFrame 实现动画延时
对于需要与屏幕刷新率同步的动画延时，requestAnimationFrame 是更好的选择。
function animate() {
console.log('动画帧执行');
requestAnimationFrame(animate);
}
// 启动动画
animate();使用 Promise 链实现顺序延时
通过 Promise 链可以实现多个延时的顺序执行。
function wait(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
wait(1000)
.then(() => {
console.log('1秒后执行');
return wait(2000);
})
.then(() => {
console.log('再2秒后执行');
});使用 Date 对象实现精确延时
对于需要更高精度的时间控制，可以结合 Date 对象实现。
function preciseDelay(ms) {
const start = Date.now();
while (Date.now() - start < ms) {}
console.log(`精确延时 ${ms} 毫秒完成`);
}注意：这种方法会阻塞主线程，只适用于需要精确延时的特殊情况。
