分别写出防抖和节流的两个函数,并描述它们分别有什么运用场景?

// 防抖函数 (Debounce)
function debounce(func, delay) {
  let timer;
  return function() {
    clearTimeout(timer);
    timer = setTimeout(() => {
      func.apply(this, arguments);
    }, delay);
  };
}

// 节流函数 (Throttle)
function throttle(func, delay) {
  let lastTime = 0;
  return function() {
    const nowTime = Date.now();
    if (nowTime - lastTime >= delay) {
      func.apply(this, arguments);
      lastTime = nowTime;
    }
  };
}


// 防抖运用场景:

// 1. 搜索框输入建议:用户输入时,不必每次输入都发送请求,而是等待用户停止输入一段时间后,再发送请求获取建议,减少服务器压力。
const searchInput = document.getElementById('search');
searchInput.addEventListener('input', debounce(function() {
  // 发送搜索请求
  console.log('Searching:', this.value);
}, 300)); // 300ms 的防抖延迟


// 2. 窗口大小调整:窗口大小调整频繁触发 resize 事件,使用防抖可以减少事件处理频率,例如在窗口大小改变后重新计算布局。
window.addEventListener('resize', debounce(function() {
  // 重新计算布局
  console.log('Resizing window');
}, 200)); // 200ms 的防抖延迟


// 节流运用场景:

// 1. 滚动加载:页面滚动时,不断触发 scroll 事件,使用节流可以控制加载频率,例如每隔一段时间加载一部分数据。
window.addEventListener('scroll', throttle(function() {
  // 加载更多数据
  console.log('Scrolling and loading data');
}, 200)); // 200ms 的节流间隔


// 2. 鼠标移动跟踪/游戏:鼠标移动会频繁触发 mousemove 事件,使用节流可以降低事件处理频率,例如每隔一段时间记录一次鼠标位置。
const mouseTracker = document.getElementById('mouse-tracker');
document.addEventListener('mousemove', throttle(function(event) {
  mouseTracker.textContent = `Mouse position: ${event.clientX}, ${event.clientY}`;
}, 100)); // 100ms 的节流间隔


// 3.  按钮点击防止重复提交:  防止用户快速多次点击按钮,导致重复提交表单或者触发多次事件。
const submitButton = document.getElementById('submit');
submitButton.addEventListener('click', throttle(function(event) {
  // 提交表单
  console.log('Submitting form');
  //  一些其他的操作,例如禁用按钮,显示 loading 状态等
}, 500)); // 500ms 的节流间隔,防止用户在短时间内多次点击


关键区别和总结:

  • 防抖 (Debounce): 在事件被触发后,设定一个定时器,如果在设定的时间内再次触发该事件,则清除前一个定时器并重新设定一个新的定时器。只有当事件停止触发一段时间后,才会执行真正的操作。 目的: 减少事件的触发频率,通常用于最后一次操作后才执行的场景。

  • 节流 (Throttle): 在一段时间内,只允许事件执行一次。如果在设定的时间内再次触发该事件,则忽略该事件。 目的: 控制事件的触发频率,通常用于持续触发事件,但需要限制频率的场景。

选择哪个取决于你的具体需求:

  • 如果只需要最后一次结果,例如搜索建议,使用防抖。
  • 如果需要在一段时间内持续响应事件,但要控制频率,例如滚动加载,使用节流。
posted @   王铁柱6  阅读(17)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· Manus的开源复刻OpenManus初探
· 三行代码完成国际化适配,妙~啊~
· .NET Core 中如何实现缓存的预热?
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗?
点击右上角即可分享
微信分享提示