js实现间隔
实现间隔的常见方法
在JavaScript中实现间隔操作通常涉及定时器或延迟执行。以下是几种常见的方法：
使用setInterval实现重复间隔
const intervalId = setInterval(() => {
console.log('This will run every 2 seconds');
}, 2000);
// 清除间隔
clearInterval(intervalId);使用setTimeout实现单次延迟
setTimeout(() => {
console.log('This will run after 3 seconds');
}, 3000);递归setTimeout实现可控间隔
function delayedLoop(count, delay) {
setTimeout(() => {
console.log(`Iteration ${count}`);
if(count > 0) delayedLoop(count - 1, delay);
}, delay);
}
delayedLoop(5, 1000);使用async/await实现间隔
function wait(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
async function runWithInterval() {
for(let i = 0; i < 5; i++) {
console.log(`Run ${i+1}`);
await wait(1500);
}
}
runWithInterval();使用requestAnimationFrame实现动画间隔
function animate(timestamp) {
// 动画逻辑
console.log('Animating...');
requestAnimationFrame(animate);
}
requestAnimationFrame(animate);使用Generator函数控制执行间隔
function* intervalGenerator() {
let i = 0;
while(true) {
yield new Promise(resolve => {
setTimeout(() => {
console.log(`Yield ${i++}`);
resolve();
}, 1000);
});
}
}
const gen = intervalGenerator();
gen.next().value.then(() => gen.next());选择哪种方法取决于具体需求：
- 需要重复执行时使用setInterval
- 需要更精确控制时使用递归setTimeout
- 需要与其他异步操作配合时使用async/await
- 需要高性能动画时使用requestAnimationFrame
