如何实现节流函数和防抖函数

---

前言

节流函数和防抖函数两个都属于优化高频率执行js代码的一种手段

---

提示：那么它们两个有什么区别，又是怎么实现的呢

一、节流函数

1.概念

事件被触发，N秒之内无论触发多少次只执行一次事件处理函数，输入验证比较适合函数节流

2.如何实现

先定义一个文本输入框

<input id="input" type="text">

这是实现代码

let input = document.getElementById('input');
  input.onkeyup = throttle(check, 1000);
  let t = null;

  function throttle(fn, delay) {
    let t = null, beginTime = new Date().getTime();
    return function () {
      var _this = this, args = arguments, curTime = new Date().getTime();
      clearTimeout(t);
      if (curTime - beginTime >= delay) {
        fn.apply(_this, args);
        beginTime = curTime;
      } else {
        // 进行延迟操作
        t = setTimeout(function () {
          fn.apply(_this, args);
        }, delay)
      }
    }
  }

  function check() {
    let val = this.value;
    if (val.length < 6) {
      console.log('长度小于6，输入不合格');
    } else {
      console.log('success');
    }
  }

二、防抖函数

1.概念

防抖函数就是N秒内只要你触发事件，就重新计时，事件处理函数的程序将永远不能被执行
函数防抖：
1.对于在事件被触发N秒后，再执行的回调=>延迟执行
2.如果在在这N秒内再次触发事件，重新开始计时

2.如何实现

先定义一个按钮和一个文本输入框

<button id="btn" style="width: 300px;height: 300px;background-color: #000000;">获取数据</button>
<input type="text" id="input">

这是实现代码

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
function debounce(fn, time, triggleNow) {
    let t = null;
    var debounce = function () {
      // 保存this执行
      let _this = this,
        // 如果返回的函数是有参数，那么我们也需要把参数加上
        args = arguments;
      // 如果进来t为null，那么把计时器清除掉
      if (t) {
        clearTimeout(t);
      }
      // 判断第一次进入是否需要延迟执行，
      if (triggleNow) {
        // 如果是true，首次进入不需要进行延迟
        let exec = !t;
        // 因为上面t已经被clearTimeout清除了，第一次是不需要防抖的，这里再把t赋值null
        t = setTimeout(function () {
          t = null;
        }, time);
        if (exec) {
          fn.apply(_this, args);
        }
      } else {
        // 每次都是延迟
        t = setTimeout(function () {
          fn.apply(_this, args);
        }, time);
      }
    }
    // 强制取消放抖
    debounce.remove = function () {
      clearTimeout(t);
      t = null;
    }
    return debounce;
  }

  let btn = document.getElementById('btn');
  // 调用debounce，这里第三个参数为true，会立刻调用请求，如果为false，则会1秒后获取请求
  btn.onclick = debounce(btnClick, 1000, true);

  function btnClick() {
    $.ajax({
      url: 'http://poetry.apiopen.top/getTime',
      type: 'GET',
      dataType: 'JSON',
      success: function (res) {
        console.log(res);
      }
    })
  }

  let input = document.getElementById('input');
  //文字输入不需要立刻获取，所以设置首次也不用马上触发
  input.onkeyup = debounce(check, 1000, false);

  function check() {
    var val = this.value;
    if (val.length < 6) {
      console.log('长度小于6，输入不合格');
    } else {
      console.log('success');
    }
  }

总结

以上就是这篇文章要讲的内容，本文仅仅简单介绍了防抖函数和节流函数的定义和如何使用及封装，都属于前端优化高频率执行js代码的一种手段。