什么是JavaScript计时事件？

JavaScript计时事件让你可以在特定时间后执行代码，或者以固定时间间隔重复执行代码。就像设置一个闹钟（单次执行）或一个重复提醒（周期执行）。

为什么需要计时事件？

在网页开发中，我们经常需要控制代码的执行时间：比如延迟显示广告、创建动画效果、轮播图自动切换、定时刷新数据等。

setTimeout – 单次定时器

setTimeout() 方法用来设置一个定时器，该定时器在指定的毫秒数后执行一次指定的函数（或代码片段）。

基本语法

let timeoutID = setTimeout(function, delay);
  • function：要执行的函数（可以是匿名函数或函数名）
  • delay：延迟时间，以毫秒为单位（1000毫秒 = 1秒）
  • timeoutID：返回的计时器ID，用于取消这个定时器

实际示例

// 3秒后显示提示信息 setTimeout(function() { alert(“3秒时间到！”); }, 3000);
注意： setTimeout只执行一次！如果需要重复执行，应该使用setInterval。

setInterval – 循环定时器

setInterval() 方法会重复调用一个函数或执行一个代码片段，每次调用之间有固定的时间间隔。

基本语法

let intervalID = setInterval(function, delay);
  • function：要重复执行的函数
  • delay：每次执行之间的时间间隔（毫秒）
  • intervalID：返回的计时器ID，用于取消这个循环定时器

实际示例

// 每秒更新一次计数器 let count = 0; let intervalID = setInterval(function() { count++; console.log(“已过去 ” + count + ” 秒”); }, 1000);
提示： setInterval会无限期执行下去，除非你使用clearInterval()来停止它。

清除计时器

使用clearTimeout()和clearInterval()可以取消之前设置的定时器。

清除setTimeout

// 设置一个5秒后的定时器 let timeoutId = setTimeout(function() { console.log(“这条消息不会显示”); }, 5000); // 在5秒前取消这个定时器 clearTimeout(timeoutId);

清除setInterval

let counter = 0; let intervalId = setInterval(function() { counter++; console.log(counter); // 当计数器达到10时停止 if (counter >= 10) { clearInterval(intervalId); console.log(“计时器已停止”); } }, 1000);
重要： 请确保保存了setTimeout或setInterval返回的ID，否则无法取消计时器！

实际应用场景

  • 网页广告在页面加载后延迟显示
  • 轮播图自动切换效果
  • 表单提交前的倒计时确认
  • 实时数据更新（如股票行情）
  • 游戏中的动画和计时机制
  • 用户操作后的提示信息自动消失
  • 实现简单的动画效果

实际案例：用户输入防抖

在搜索框中，当用户停止输入300毫秒后才执行搜索，避免频繁请求

let timeoutId; searchInput.addEventListener(‘input’, function() { // 清除之前的定时器 clearTimeout(timeoutId); // 设置新的定时器 timeoutId = setTimeout(function() { performSearch(); }, 300); });