以下代码均依赖于jQuery库

如需原生JavaScript请自行修改

防抖

基础防抖

<script>
  let timer = null;
  // 绑定事件
  $('input').on('input', function() {
    clearTimeout(timer);
    timer = setTimeout(() => {
      console.log($(this).val());  //自定义事件
    }, 1000); // 1秒执行一次
  });
</script>

封装公共防抖函数

<script>
  // 绑定事件
  $('input').on('input', debounce(function() {
    console.log($(this).val()); // 自定义事件
  }));

  // 封装
  function debounce(fn) {
    let timer = null;
    return function() {
      clearTimeout(timer);
      timer = setTimeout(() => {
        fn.call(this);
      }, 1000);
    };
  };
</script>

节流

基础节流

<script>
  let timer = null;
  // 绑定事件
  $(document).on('scroll', function() {
    if(timer) return;
    timer = setTimeout(() => {
      console.log(true); // 自定义事件
      timer = null;
    }, 500); // 0.5秒执行一次
  });
</script>

封装公共节流函数

<script>
  // 绑定事件
  $(document).on('scroll', throttle(function() {
    console.log(true) // 自定义事件
  }));

  // 封装
  function throttle(fn) {
    return function() {
      if(fn.timer) return;
      fn.timer = setTimeout(() => {
        fn.call(this);
        fn.timer = null;
      }, 500);
    };
  };
</script>