当前位置:首页 > JavaScript

js实现每过1秒加1

2026-03-02 00:36:05JavaScript

使用 setInterval 实现每秒加1

通过 setInterval 可以定时执行函数,适合实现持续累加的功能。

js实现每过1秒加1

let count = 0;
const timer = setInterval(() => {
  count++;
  console.log(count); // 替换为实际需要的操作
}, 1000);

// 停止计时器的示例(可选)
// clearInterval(timer);

使用 setTimeout 递归实现

递归调用 setTimeout 可以避免 setInterval 可能导致的执行时间偏差问题。

js实现每过1秒加1

let count = 0;
function increment() {
  count++;
  console.log(count); // 替换为实际需要的操作
  setTimeout(increment, 1000);
}
increment();

使用 requestAnimationFrame 实现(适合动画场景)

requestAnimationFrame 通常用于动画,但可以通过时间差模拟每秒加1。

let count = 0;
let lastTime = 0;
function increment(timestamp) {
  if (timestamp - lastTime >= 1000) {
    count++;
    console.log(count); // 替换为实际需要的操作
    lastTime = timestamp;
  }
  requestAnimationFrame(increment);
}
requestAnimationFrame(increment);

注意事项

  • 使用 setInterval 时需注意内存泄漏问题,必要时调用 clearInterval 停止计时器。
  • 递归 setTimeout 更灵活,但需确保递归调用正确终止。
  • requestAnimationFrame 适用于浏览器环境,不适合纯计数场景。

标签: js
分享给朋友:

相关文章

原生js实现轮播图

原生js实现轮播图

基本结构搭建 HTML部分需要包含轮播图容器、图片列表及导航按钮。结构示例如下: <div class="slider-container"> <div class="slid…

js实现类

js实现类

JavaScript 实现类的几种方式 JavaScript 是一种基于原型的语言,但在 ES6 之后引入了 class 语法糖,使得实现类更加直观。以下是几种常见的实现方式: 使用构造函数 传统的…

js防抖和节流实现

js防抖和节流实现

防抖(Debounce)的实现 防抖的核心思想是在事件被触发后,延迟执行回调函数。如果在延迟时间内再次触发事件,则重新计时。适用于输入框搜索、窗口大小调整等场景。 function debounce…

js实现防洪

js实现防洪

防抖(Debounce)实现 防抖的核心思想是在事件触发后延迟执行回调函数,若在延迟时间内再次触发事件,则重新计时。适用于输入框搜索、窗口调整等场景。 function debounce(func,…

js实现下拉菜单

js实现下拉菜单

使用HTML和CSS创建基础结构 HTML部分需要包含一个触发下拉的按钮和隐藏的下拉菜单内容: <div class="dropdown"> <button class="dr…

js实现按钮点击

js实现按钮点击

实现按钮点击的JavaScript方法 HTML按钮元素 在HTML中创建按钮元素,为其添加id或class以便JavaScript选择: <button id="myButton">点…