js动态效果计时

在JavaScript中实现动态效果的计时功能，通常会用到setTimeout和setInterval这两个函数。

基础概念：

• setTimeout：在指定的毫秒数后执行一次函数。
• setInterval：每隔指定的毫秒数重复执行函数。

优势：

• 可以精确控制代码的执行时机。
• 能够实现各种动态效果和定时任务。

类型：

1. 一次性计时：使用setTimeout。
2. 一次性计时：使用setTimeout。
3. 重复计时：使用setInterval。
4. 重复计时：使用setInterval。

应用场景：

• 页面元素的渐隐渐现效果。
• 定时刷新数据。
• 实现动画效果。

可能遇到的问题及原因：

1. 计时不准确：可能是由于浏览器的性能问题或者代码中其他耗时操作导致。
   • 解决方法：优化代码逻辑，减少不必要的计算和操作。

• 计时器无法清除：忘记保存计时器的返回值，或者在错误的条件下清除计时器。
  • 解决方法：确保正确保存计时器的返回值，并在适当的条件下使用clearTimeout或clearInterval清除计时器。

解决常见问题的示例： 假设要实现一个按钮点击后 5 秒隐藏的效果，但发现有时不生效。

let hideTimer;
button.addEventListener('click', function() {
  if (hideTimer) {
    clearTimeout(hideTimer); // 如果之前有计时器，先清除
  }
  hideTimer = setTimeout(function() {
    button.style.display = 'none';
  }, 5000);
});

这样可以避免多次点击按钮导致计时混乱的问题。