当前位置:首页 > 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实现拷贝

实现文本拷贝 使用 document.execCommand 方法(已废弃但兼容性较好): function copyText(text) { const textarea = document…

js节流实现

js节流实现

节流的概念 节流(Throttle)是一种限制函数执行频率的技术,确保函数在一定时间间隔内只执行一次。常用于滚动事件、窗口调整等高频触发的场景。 基础实现方法 使用时间戳判断是否执行函数: fun…

js实现正交

js实现正交

正交的概念 正交在数学和计算机科学中通常指两个向量垂直或线性无关。在编程中,正交性常被用于设计模块化、低耦合的系统。 向量正交判断 判断两个向量是否正交可以通过点积是否为0来实现: functio…

js实现滚动

js实现滚动

实现滚动效果的方法 在JavaScript中实现滚动效果可以通过多种方式完成,以下是一些常见的方法: 使用window.scrollTo() window.scrollTo()方法可以将页面滚动到指…

js验证码的实现

js验证码的实现

验证码的基本实现原理 验证码(CAPTCHA)的核心目标是区分人类用户和自动化程序。JavaScript可用于生成或验证客户端验证码,但需注意纯前端验证可能被绕过,通常需结合后端验证。 纯前端验证码…

js实现定位

js实现定位

使用Geolocation API获取当前位置 在JavaScript中,可以通过浏览器内置的Geolocation API获取用户的地理位置信息。该API需要用户授权才能访问位置数据。 if (n…