当前位置:首页 > JavaScript

js实现循环定时

2026-03-15 20:52:33JavaScript

使用 setInterval 实现循环定时

const intervalId = setInterval(() => {
  console.log('定时执行的任务');
}, 1000); // 每1000毫秒(1秒)执行一次

// 清除定时器
clearInterval(intervalId);

setInterval 会按照指定的时间间隔重复执行回调函数,直到被 clearInterval 清除。

使用 setTimeout 实现循环定时

function loopWithTimeout() {
  console.log('定时执行的任务');

  setTimeout(loopWithTimeout, 1000); // 1秒后再次执行
}

loopWithTimeout(); // 启动循环

这种方法通过递归调用 setTimeout 实现循环效果,相比 setInterval 能更精确控制每次执行的间隔。

使用 requestAnimationFrame 实现循环

function loopWithRAF() {
  console.log('动画帧循环');

  requestAnimationFrame(loopWithRAF);
}

loopWithRAF();

requestAnimationFrame 通常用于动画循环,会与浏览器刷新率同步(通常60fps),适合需要流畅动画的场景。

使用 async/await 实现可控循环

async function asyncLoop() {
  while(true) {
    console.log('异步循环任务');
    await new Promise(resolve => setTimeout(resolve, 1000));
  }
}

asyncLoop();

这种方法结合了异步函数和 Promise,可以方便地控制循环流程和错误处理。

注意事项

定时器的时间间隔是预期的最小延迟,实际执行时间可能因主线程繁忙而延后。

循环定时任务应考虑性能影响,在不需要时及时清除定时器避免内存泄漏。

js实现循环定时

requestAnimationFrame 不适合需要固定时间间隔的场景,因为它依赖于浏览器刷新率。

标签: js
分享给朋友:

相关文章

js实现轮播图

js实现轮播图

基础轮播图实现 使用HTML、CSS和JavaScript实现一个简单的自动轮播图。HTML结构包含一个容器和多个图片项。 <div class="slider"> <div…

js实现vr

js实现vr

使用WebXR API实现VR体验 WebXR是浏览器中实现VR和AR体验的标准API,它取代了早期的WebVR。现代浏览器如Chrome、Edge和Firefox已支持WebXR。 // 初始化W…

js实现变形

js实现变形

使用 CSS 和 JavaScript 实现元素变形 在 JavaScript 中实现变形效果通常结合 CSS 的 transform 属性,通过动态修改该属性实现元素的旋转、缩放、倾斜或平移。 基…

js实现投球

js实现投球

实现投球动画的基本思路 使用JavaScript和CSS动画结合的方式模拟投球效果。核心是通过改变元素的位置、旋转和缩放属性,配合定时器或CSS过渡实现平滑动画。 创建基础HTML结构 <di…

链表实现js

链表实现js

链表的基本概念 链表是一种线性数据结构,由一系列节点组成,每个节点包含数据和一个指向下一个节点的指针(单向链表)或两个指针(双向链表)。与数组不同,链表在内存中非连续存储,插入和删除操作更高效,但随机…

js实现代码雨

js实现代码雨

实现代码雨效果 使用HTML5 Canvas和JavaScript可以轻松实现经典的代码雨效果。以下是完整的实现代码和说明: HTML结构 <!DOCTYPE html> <htm…