封装一个防抖、节流函数

549 阅读1分钟

1.概念

防抖:

什么是防抖呢?就是用户触发事件过于频繁,只需要最后一次事件的操作。 可以把它想向成打游戏时候的回城,即一段时间内只触发一次,如果再次点击就会重新计时。

节流:

规定在一个单位时间内,只能触发一次函数。如果这个单位时间内触发多次函数,只有一次生效。

2.具体封装的方法

2.1 防抖函数

` const inp = document.querySelector("input");

  //封装一个防抖函数
  inp.oninput = debounce(function () {
    console.log(this.value);
  }, 500);
  function debounce(fn, delay) {
    let t = null;
    return function () {
      if (t !== null) {
        clearInterval(t);
      }
      t = setTimeout(() => {
        fn.call(this);
      }, delay);
    };
  }`

2.2 节流函数

见综合demo

3.综合demo