正文

jquery每隔一秒执行一次的方法总结 setInterval与setTimeout的区别及实例演示

/0 浏览量
0904

嘿，朋友！你是不是经常在想，为什么我写的页面动效总是时灵时不灵？或者想做一个倒计时、轮播图，却发现 JavaScript 像只睡过头的闹钟，要么不醒，要么停不下来？

别急，今天咱们就坐下来，泡杯茶，把 setInterval 和 setTimeout 这两个“时间管理大师”彻底讲清楚。我见过太多开发者（包括曾经的我自己）把这两个函数混用，最后搞得代码像一团乱麻。今天，咱们用大白话、真实案例，把这个知识点嚼碎了喂给你。

一、先搞懂核心：它们到底是什么？

很多人一上来就背文档，说“setInterval 是循环，setTimeout 是一次性”。这话没错，但太干了。咱们换个角度想：

  • setTimeout 就像你设了一个单人闹钟：“睡一小时后叫我一次”。它只响一次，然后就没了。
  • setInterval 就像你设了一个周期性的提醒：“每五分钟提醒我一次喝水”。它会一直响，直到你主动关掉它。

但在 JavaScript 里，事情没那么简单。因为 JS 是单线程的，这些定时器并不是“精确到毫秒”的，它们只是“尽可能早地执行”。这点很重要，后面会解释。

二、setTimeout：单次延迟执行

基本语法

let timerId = setTimeout(function() {
  // 要执行的代码
}, delayInMilliseconds);

实例：3 秒后弹个窗，然后“死”掉

console.log("开始等待...");

const myTimer = setTimeout(function() {
  console.log("叮！3 秒到了！");
}, 3000);

// 你可以在 3 秒内取消它！
// clearTimeout(myTimer);

真实场景：用户停止打字后自动保存

想象你在写一个编辑器，你不想每敲一个字就保存一次（太浪费资源），而是想等用户停手 1 秒后再保存。这就是 setTimeout 的经典用法！

let saveTimer;

$('#editor').on('input', function() {
  // 每次用户输入，先取消之前的定时器
  clearTimeout(saveTimer);
  
  // 重新设一个 1 秒后的定时器
  saveTimer = setTimeout(function() {
    console.log("自动保存到服务器...");
    // 这里调用 AJAX 保存数据
  }, 1000);
});

关键点：clearTimeout 必须在下一个定时器触发前调用，否则就晚了。

三、setInterval：循环执行

基本语法

let timerId = setInterval(function() {
  // 要循环执行的代码
}, intervalInMilliseconds);

实例：每秒更新时间显示

// 假设 HTML 里有 <span id="clock"></span>
function updateClock() {
  const now = new Date();
  $('#clock').text(now.toLocaleTimeString());
}

// 立即执行一次，避免页面加载后等待 1 秒才显示
updateClock();

// 然后每秒执行一次
const clockTimer = setInterval(updateClock, 1000);

// 5 秒后停止
setTimeout(function() {
  clearInterval(clockTimer);
  console.log("时钟已停止");
}, 5000);

真实场景：轮播图自动切换

let slideIndex = 0;
const slides = $('.slide');
const totalSlides = slides.length;

function showNextSlide() {
  // 隐藏所有 slide
  slides.removeClass('active');
  
  // 显示下一个
  slideIndex = (slideIndex + 1) % totalSlides;
  $(slides[slideIndex]).addClass('active');
}

// 每 3 秒切换一次
const sliderTimer = setInterval(showNextSlide, 3000);

// 鼠标悬停时暂停，离开后继续
$('.slider-container').on('mouseenter', function() {
  clearInterval(sliderTimer);
}).on('mouseleave', function() {
  // 注意：这里需要重新保存 timerId，实际项目中通常用变量管理
  // 更优雅的做法是使用标志位配合 setTimeout 递归实现
});

四、setInterval 的陷阱：时间累积误差！

这是 most 开发者踩过的坑。setInterval 不会等待上一次执行完成再开始倒计时！

举个例子：

setInterval(function() {
  // 假设这个函数因为网络请求或其他原因执行了 200ms
  doHeavyWork(); 
}, 1000); // 你以为是每 1000ms 执行一次

实际上，如果 doHeavyWork() 执行了 200ms，那么下一次执行会在 1200ms 后触发，而不是 1000ms。长期运行下来，误差会越来越大！

解决方案：用 setTimeout 递归代替 setInterval

function loop() {
  // 执行你的逻辑
  doSomething();
  
  // 逻辑执行完后，再设下一个定时器
  // 这样能保证每次间隔都是严格的 1000ms
  setTimeout(loop, 1000);
}

loop(); // 启动

专家建议：在大多数现代 Web 应用中，优先使用 setTimeout 递归，而不是 setInterval。它更可控、更准确。

五、jQuery 中的定时器注意事项

jQuery 本身没有封装定时器，但你在用 jQuery 操作 DOM 时要注意：

  1. 动画队列问题：如果你用 setInterval 触发动画，可能会造成队列堆积。

    // 错误示范：快速连续触发动画
setInterval(function() {
 $('#box').animate({ left: '+=10px' }, 500);
}, 100);

    这会导致动画卡死或错乱。

  2. 正确做法：

    function moveBox() {
 $('#box').animate({ left: '+=10px' }, 500, function() {
   // 动画完成后，再设置下一个定时器
   setTimeout(moveBox, 100);
 });
}
moveBox();

  3. 页面隐藏时暂停：现代浏览器支持 document.hidden 属性，可以优化后台页面的定时器行为。

    let isRunning = true;
const timer = setInterval(function() {
 if (!document.hidden && isRunning) {
   // 页面可见时才执行
   doWork();
 }
}, 1000);

六、对比总结：一张表看懂

特性 setTimeout setInterval
执行次数 一次 多次，直到清除
时间精度 相对准确 可能有累积误差
取消方式 clearTimeout() clearInterval()
适用场景 延迟执行、防抖、单次提醒 轮播、实时数据刷新、游戏循环
推荐程度 优先使用（递归模式） 谨慎使用，注意误差

七、实战项目：做一个简单的“心跳”效果

咱们来做个有点意思的东西：一个跟着心跳频率跳动的圆。

HTML:

<div class="heartbeat-container">
  <div class="heart"></div>
  <p>心跳：<span id="beat-count">0</span> 次</p>
  <button id="start">开始</button>
  <button id="stop">停止</button>
</div>

CSS:

.heart {
  width: 50px;
  height: 50px;
  background: red;
  border-radius: 50%;
  transform: scale(1);
  transition: transform 0.1s;
}

.heart.beat {
  transform: scale(1.3);
}

JavaScript (jQuery):

let beatTimer;
let count = 0;
let isRunning = false;

function heartbeat() {
  const $heart = $('.heart');
  const $count = $('#beat-count');
  
  // 跳动动画
  $heart.addClass('beat');
  setTimeout(function() {
    $heart.removeClass('beat');
  }, 100);
  
  // 计数
  count++;
  $count.text(count);
}

$('#start').on('click', function() {
  if (!isRunning) {
    isRunning = true;
    // 每 800ms 心跳一次（模拟真实心率）
    // 使用 setTimeout 递归保证精度
    function loop() {
      heartbeat();
      beatTimer = setTimeout(loop, 800);
    }
    loop();
  }
});

$('#stop').on('click', function() {
  isRunning = false;
  clearTimeout(beatTimer);
});

看，这就是用 setTimeout 递归模拟 setInterval 行为的最佳实践！既保证了节奏准确，又容易控制。

八、常见面试题 & 坑点

Q1: setTimeout(fn, 0) 什么时候执行？

答：它会把 fn 放入任务队列，等当前执行栈清空后立即执行。常用于打破同步阻塞，实现“异步化”效果。

console.log(1);
setTimeout(function() { console.log(2); }, 0);
console.log(3);
// 输出顺序：1, 3, 2

Q2: setInterval 传入的函数参数怎么传？

// 正确
setInterval(function(name) {
  console.log('Hello ' + name);
}, 1000, 'Alice'); // 第三个参数开始是传给回调函数的

// 错误：这样写只会执行一次（因为 setTimeout 的用法不同）
setTimeout(sayHello('Alice'), 1000); // 立即执行并传入返回值

Q3: 如何精确地每隔固定时间执行，且不受前一次执行时间影响？

答：记住这个模板：

function periodicTask() {
  doWork();
  setTimeout(periodicTask, interval);
}
setTimeout(periodicTask, interval);

结语

定时器是 JavaScript 异步编程的基石之一。setInterval 简单直接但容易踩坑，setTimeout 灵活可控更推荐。在实际项目中，我建议你：

  1. 默认用 setTimeout 递归，除非你有明确的理由用 setInterval。
  2. 始终保存 timerId，方便随时清除。
  3. 考虑页面可见性，优化性能和用户体验。
  4. 调试时用 console.log 打出时间戳，验证实际执行间隔。

下次当你需要“每秒做某事”时，别再下意识敲 setInterval 了，想想咱们聊的这些，用 setTimeout 递归，让你的代码更稳健、更专业。

祝你编码愉快！有任何问题，随时来聊～ 🚀

-- 展开阅读全文 --