当前位置:首页 > JavaScript

js实现每过1秒加1

2026-04-05 01:26:49JavaScript

使用 setInterval 实现每秒加1

通过 setInterval 方法可以定时执行函数,适合周期性任务。以下是一个简单的实现示例:

js实现每过1秒加1

let count = 0;
const timer = setInterval(() => {
  count++;
  console.log(count);
}, 1000);

使用 setTimeout 递归实现

递归调用 setTimeout 可以避免 setInterval 的潜在问题(如执行时间不精确):

js实现每过1秒加1

let count = 0;
function increment() {
  count++;
  console.log(count);
  setTimeout(increment, 1000);
}
increment();

清除定时器的方法

需要停止计数器时,可以通过 clearIntervalclearTimeout 终止:

// 对于 setInterval
clearInterval(timer);

// 对于 setTimeout
// 需在递归调用中保存 timeoutId
let timeoutId;
function increment() {
  count++;
  console.log(count);
  timeoutId = setTimeout(increment, 1000);
}
clearTimeout(timeoutId);

使用 requestAnimationFrame 实现(高精度)

适用于需要高精度计时的场景(如动画),但需手动计算时间差:

let count = 0;
let lastTime = 0;
function increment(timestamp) {
  if (timestamp - lastTime >= 1000) {
    count++;
    console.log(count);
    lastTime = timestamp;
  }
  requestAnimationFrame(increment);
}
requestAnimationFrame(increment);

注意事项

  • 浏览器环境下定时器最小延迟通常为 4ms(根据规范)
  • Node.js 中定时器行为可能略有不同
  • 长时间运行的定时器可能导致内存泄漏,需适时清理

标签: js
分享给朋友:

相关文章

js实现动画

js实现动画

使用 CSS 动画与 JavaScript 控制 通过 JavaScript 动态添加或移除 CSS 类来触发动画。CSS 定义关键帧(@keyframes),JavaScript 通过 classL…

js实现验证码

js实现验证码

使用Canvas生成图形验证码 在HTML中创建一个Canvas元素用于绘制验证码。通过JavaScript随机生成数字或字母组合,并添加干扰线、噪点等干扰元素增强安全性。 <canvas i…

js实现图表

js实现图表

在JavaScript中实现图表通常使用流行的图表库,以下是几种常见的方法和工具: 使用Chart.js Chart.js是一个简单灵活的库,适合快速生成响应式图表。安装方式包括CDN引入或npm安…

js 实现链表

js 实现链表

链表的基本概念 链表是一种线性数据结构,由一系列节点组成,每个节点包含数据和指向下一个节点的指针。与数组不同,链表在内存中是非连续存储的,插入和删除操作效率较高。 链表的实现 在 JavaScrip…

js实现vr

js实现vr

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

js实现预览

js实现预览

文件上传预览实现 使用JavaScript实现文件上传预览功能,可以通过FileReader对象读取文件内容并显示预览。以下代码支持图片、文本和PDF文件的预览: // HTML部分需要包含inpu…