【JS】简单实现防抖函数

最新推荐文章于 2024-06-15 15:17:29 发布

一颗新鲜马铃薯：)

最新推荐文章于 2024-06-15 15:17:29 发布

阅读量406

点赞数 1

分类专栏： JS

本文链接：https://blog.csdn.net/weixin_43147887/article/details/125944365

版权

javascript 前端

JS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

使用场景

在搜索框输入信息，下拉栏返回搜索联想结果，需前端发送网络请求，使用防抖。

代码

debounce.js

function debounce(fn, delay, immediate = false) {
  // 定义一个定时器, 保存上一次的定时器
  let timer = null;
  let isInvoke = false;
  const _debounce = function(...args) {
    // 取消上一次的定时器
    if (timer) clearTimeout(timer);
    // 判断是否需要立即执行,暂停一段时间继续操作的第一次事件也需要执行
    if (immediate && !isInvoke) {
      fn.apply(this, args);
      isInvoke = true;
    } else {
      // 延迟执行
      timer = setTimeout(() => {
        // 外部传入的真正要执行的函数
        fn.apply(this, args);
        isInvoke = false;
      }, delay)
    }
  }
  return _debounce;
}

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <input type="text">
  <script src="./debounce.js"></script>
  <script>
    const inputEl = document.querySelector("input");
    let counter = 0;
    const inputChange = function(event) {
    //模拟发送网络请求
      console.log(`发送了第${++counter}次网络请求`,this,event);
    }
    //防抖处理
    const debounceChange = debounce(inputChange,2000,true);
    inputEl.oninput = debounceChange;
  </script>
</body>
</html>