防抖

基本思想

提示

当某个事件被频繁触发时，只有在指定时间内没有再触发这个事件，才会执行相应的处理函数。

应用场景

• 搜索框输入联想
• 文本编辑器的自动存档（停止输入几秒后再保存）
• 窗口大小调整事件（确保只在调整结束后的稳定状态执行逻辑）
• 表单验证（停止输入后验证）

实现思路

function debounce(fn, delay) {
  let timeoutId;
  return function(...args) {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => {
      fn.apply(this, args);
    }, delay);
  };
}

const search = debounce(() => {
    console.log('搜索:', searchQuery.value)
    // 实际搜索逻辑...
}, 500)

节流

基本思想

提示

它确保一个函数在规定的时间间隔内最多只能执行一次。无论事件被触发多少次，节流函数都会保证在指定的间隔内只执行一次回调。

应用场景

• 页面滚动事件
• 鼠标移动事件
• 游戏中的按键处理

实现思路

function throttle(fn, limit) {
  let lastRun;
  return function(...args) {
    if (!lastRun || Date.now() - lastRun >= limit) {
      fn.apply(this, args);
      lastRun = Date.now();
    }
  };
}

const handleScroll = throttle(() => {
    console.log('滚动处理...')
}, 200)