如何在JavaScript的指定时间区间内持续执行任务？

如果要让某个操作在指定时间段内持续执行，比如让变量5秒内不断递增，之后自动停止，其实可以用setInterval或者requestAnimationFrame实现，下面是具体方案：

方案一：setInterval + 时长控制 #

setInterval本身就是按固定间隔重复执行回调，我们只需要记录开始时间，每次执行时检查是否超出指定时长，到点就清除定时器即可。

let count = 0;
const totalDuration = 5000; // 总时长5秒
const startTimestamp = Date.now();

// 创建定时器，每100毫秒执行一次（可按需调整间隔）
const intervalId = setInterval(() => {
  // 执行你需要的操作，这里是变量递增
  count++;
  console.log(count);

  // 检查是否达到设定时长
  if (Date.now() - startTimestamp >= totalDuration) {
    clearInterval(intervalId);
    console.log("操作已停止");
  }
}, 100);

注意：如果你的回调执行时间超过了设定的间隔，可能会出现任务堆积，导致操作连续执行没有间隔，这种情况下更推荐用下面的方案。

方案二：requestAnimationFrame（适合流畅操作/动画） #

requestAnimationFrame是浏览器专为动画场景设计的API，它会跟屏幕刷新率同步执行回调，比setInterval更流畅，不会出现丢帧问题，同样可以通过计时来控制执行时长。

let count = 0;
const totalDuration = 5000;
const startTimestamp = Date.now();

function loop() {
  // 执行目标操作
  count++;
  console.log(count);

  // 没到时间就继续循环
  if (Date.now() - startTimestamp < totalDuration) {
    requestAnimationFrame(loop);
  } else {
    console.log("操作已停止");
  }
}

// 启动循环
requestAnimationFrame(loop);

这种方法特别适合需要平滑变化的场景，比如DOM元素的移动、数值的渐进式变化，性能表现更好。

内容的提问来源于stack exchange，提问作者Mohammad reza Shabrangi