js 搜索框输入 防抖节流

在JavaScript中，搜索框输入的防抖和节流是两种常用的技术。防抖（debounce）是指当用户在输入内容时，通过延迟执行来减少请求次数，从而节约请求资源。节流（throttle）则是指当用户频繁操作某个事件时，通过设置一定时间间隔来限制事件触发的频率。

防抖的应用场景包括输入搜索、频繁点击按钮、监听浏览器滚动事件等。例如，在输入搜索时，用户不断地输入内容，为了减少请求次数并节约请求资源，可以使用防抖技术。下面是一个使用防抖实现的代码示例：

function debounce(fn, delay) {
  let timer = null; 

  return function () {
    if (timer) {
      clearTimeout(timer);
    }

    timer = setTimeout(() => {
      fn.apply(this);
    }, delay);
  }
}

节流的应用场景一般是在按钮点击事件中。例如，当一秒内频繁点击按钮，节流技术可以限制只触发一次请求。下面是一个使用节流实现的代码示例：

function throttle(fn) {
  let timer = null;

  return function () {
    if (timer) return;

    timer = setTimeout(() => {
      fn.apply(this, arguments);
      timer = null;
    }, 1000);
  };
}

这些防抖和节流的函数可以根据实际需求进行调整，并在对应的事件中进行调用。通过使用防抖和节流技术，可以优化用户体验，减少不必要的请求和操作。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [js节流防抖应用场景,以及在vue中节流防抖的具体实现操作](https://download.csdn.net/download/weixin_38675777/14662687)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"]
- *2* [【JS函数】JS函数之防抖、节流函数](https://blog.csdn.net/qq_42451979/article/details/125514018)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"]
- *3* [js防抖节流](https://blog.csdn.net/qq_52326094/article/details/127567623)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"]
[ .reference_list ]