封装防抖节流，控制函数调用————JS

最新推荐文章于 2023-05-25 11:35:53 发布

原创最新推荐文章于 2023-05-25 11:35:53 发布 · 309 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js #封装

前端同时被 2 个专栏收录

53 篇文章

订阅专栏

12 篇文章

订阅专栏

本文介绍了JavaScript中两种重要的函数优化技巧——防抖(debounce)和节流(throttle)。提供了详细的函数实现，并展示了如何在实际项目中通过debounce和throttle函数来提高性能，例如在事件监听器中限制函数的执行频率。

超级方便！！！！！封装在common.js文件需要时调用！

  /**
   * 函数防抖
   */
  function debounce(fn, wait = 1000) {
    let timer;
    return function () {
      let context = this;
      let args = arguments;
      if (timer) clearTimeout(timer);
      timer = setTimeout(() => {
        fn.apply(context, args);
      }, wait)
    }
  }
  /**
   * 函数节流
   */
  function throttle(fn, wait = 1000) {
    let timer;
    return function () {
      if (timer != null) return;
      let context = this;
      let args = arguments;
      fn.apply(context, args);
      timer = setTimeout(() => {
        timer = null;
      }, wait);
    }
  }

使用方法：

    btnDebounce: debounce(function (str1, str2) {
        console.log(str1, str2);
    }, 2000),    
    btnDethrottle: throttle(function (str1, str2) {
        console.log(str1, str2);
    }, 2000),