如何用防抖和节流优化前端性能，让你的网站更快更流畅？防抖和节流是前端开发中常用两种优化技术，它们可以有效地减少一些高频事

防抖和节流是前端开发中常用两种优化技术，它们可以有效地减少一些高频事件的触发次数，提高页面性能和用户体验。
防抖：

Copyfunction debounce(func, delay) {
  let timer;
  return function() {
    const context = this;
    const args = arguments;
    clearTimeout(timer);
    timer = setTimeout(() => {
      func.apply(context, args);
    }, delay);
  };
}

const searchInput = document.querySelector('#search-input');
searchInput.addEventListener('input', debounce(function() {
  // 实时搜索逻辑
}, 500));

节流：

Copyfunction throttle(func, delay) {
  let timer;
  return function() {
    const context = this;
    const args = arguments;
    if (!timer) {
      timer = setTimeout(() => {
        func.apply(context, args);
        timer = null;
      }, delay);
    }
  };
}

window.addEventListener('scroll', throttle(function() {
  // 滚动加载逻辑
}, 500));

以上代码仅供参考，具体实现方式和参数需要根据具体场景和需求进行调整。

以下是一些常见的应用场景和对应的代码示例：
一、防抖
- 1.搜索框实时搜索：当用户在搜索框中输入文字时，通常需要实时向后端发送请求获取搜索结果，如果每次输入都立即发送请求，会造成过多的网络请求和服务器压力，此时可以使用防抖技术，将输入事件的触发延迟一段时间，只有用户停止输入一段时间后才发送请求，从而减少不必要的请求次数。
- 2.表单验证：当用户在表单中输入数据时，通常需要进行实时的表单验证，例如检查用户名是否已存在、密码是否符合要求等，如果每次输入都立即进行验证，会造成不必要的网络请求服务器压力，此时可以使用防抖技术，将输入事件的触发延迟一段时间，只有用户停止输入一段时间后才进行验证，从而减少不必要的验证次数。
- javascript function debounce(func, delay) { let timer; return function() { const context = this; const args = arguments; clearTimeout(timer); timer = setTimeout(() => { func.apply(context, args); }, delay); }; } const usernameInput = document.querySelector('#username-input'); usernameInput.addEventListener('input', debounce(function() { // 检查用户名是否已存在 }, 500));
- 3.按钮点击事件：当用户频繁点击某个按钮时，可能会触发多次点击事件，如果每次点击都立即执行相应的操作，会造成不必要的资源浪费和用户体验下降，此时可以使用防抖技术，将点击事件的触发延迟一段时间，只有用户停止点击一段时间后才执行操作，从而避免不必要的操作。
- javascript function debounce(func, delay) { let timer; return function() { const context = this; const args = arguments; clearTimeout(timer); timer = setTimeout(() => { func.apply(context, args); }, delay); }; } const submitBtn = document.querySelector('#submit-btn'); submitBtn.addEventListener('click', debounce(function() { // 执行提交操作 }, 500));
二、节流
- 1.滚动事件：当页面中存在大量滚动操作时，例如滚动加载、滚动翻页等，如果每次滚动都触发相应的事件，会成过多的事件触发和页面卡顿，此时可以使用节流技术，将滚动事件的触发间隔一定时间，只有在一定时间内没有触发事件才执行相应的操作，从而减少事件触发次数。
- javascript function throttle(func, delay) { let timer; return function() { const context = this; const args = arguments; if (!timer) { timer = setTimeout(() => { func.apply(context, args); timer = null; }, delay); } }; } window.addEventListener('scroll', throttle(function() { // 滚动加载逻辑 }, 500));
- 2.窗口大小改变事件：当浏览器窗口大小改变时，页面中的元素通常需要重新布局和调整大小，如果每次窗口大小改变都触发相应的事件，会造成过多的事件触发和页面卡顿，此时可以使用节流技术，将窗口大小改变事件的触发间隔一定时间，只有在一定时间内没有触发事件才重新布局和调整大小，从而减少事件发次数。
- javascript function throttle(func, delay) { let timer; return function() { const context = this; const args = arguments; if (!timer) { timer = setTimeout(() => { func.apply(context, args); timer = null; }, delay); } }; } window.addEventListener('resize', throttle(function() { // 重新布局和调整大小逻辑 }, 500));
- 3.鼠标移动事件：当鼠标在页面上移动时，可能会触发多次鼠标移动事件，如果每次移动都触发相应的事件，会造成过多的事件触发和页面卡顿，此时可以使用节流技术，将鼠标移动事件的触发间隔一定时间，只有在一定时间内没有触发事件才执行相应的操作，从而减少事件触发次数。
- javascript function throttle(func, delay) { let timer; return function() { const context = this; const args = arguments; if (!timer) { timer = setTimeout(() => { func.apply(context, args); timer = null; }, delay); } }; } window.addEventListener('mousemove', throttle(function() { // 鼠标移动逻辑 }, 500));
总之，防抖和节流是前端开发中常用的优化技术，可以在一些高频事件的场景中有效地减少事件触发次数，提高页面性能和用户体验。但需要根据具体场景和需求选择合适的技术和参数。