微信小程序 - 函数防抖 / 函数节流（轮子封装）

亦凉 2022-11-24 12:58 228阅读 0赞

## 前言 ##

如果你不了解这两个概念，请读完前面，如果你了解，请直接复制代码使用即可。

> 函数节流是减少函数的触发频率；函数防抖是延迟函数执行，且不管触发多少次都只执行最后一次。

## 函数防抖 ##

**延迟函数执行**。多用于 `input` 框输入时，显示匹配的输入内容的情况。

--------------------

## 函数节流 ##

单位时间 `n` 秒内，**第一次触发函数执行之后不管用户触发多少次都不会执行。**

到下一个单位时间 `n` 秒时，第一次触发函数执行。

多用于页面 `scroll` 滚动，窗口 `resize`，防止按钮重复点击等。

--------------------

## 源码 ##

小程序中使用函数防抖节流一般都将这两种方法封装在公用 `js` 里。

//common.js
    
    /*函数节流*/
    function throttle(fn, interval) { 
      var enterTime = 0; //触发的时间
      var gapTime = interval || 300; //间隔时间，如果interval不传值，默认为300ms
      return function() { 
    	var that = this;
    	var backTime = new Date(); //第一次函数return即触发的时间
    	if(backTime - enterTime > gapTime) { 
    	  fn.call(that, arguments);
    	  enterTime = backTime; //赋值给第一次触发的时间 保存第二次触发时间
        }
      };
    }
    
    /*函数防抖*/
    function debounce(fn, interval) { 
      var timer;
      var gapTime = interval || 1000; //间隔时间 不传值默认为1000ms
      return function() { 
        clearTimeout(timer);
        var that = this;
        var args = arguments; //保存arguments setTimeout是全局的 arguments不是防抖函数需要的
        timer = setTimeout(function() { 
    	  fn.call(that, args);
        }, gapTime);
      };
    }
    
    /*导出*/
    export default { 
      throttle,
      debounce
    };

## 使用方法 ##

// 导入
    import tool from '路径';
    
    Page({ 
    
      data: { 
        a: 0
      },
      
      // 1. 写自己的函数
      // 2. 传入到 throttle / debounce
      
      // 默认时间(1秒)
      onPageScroll: tool.throttle(function(a){ 
        console.log(a)
      }),
      
      // 自定义时间
      goUnlock: tool.debounce(function() { 
        // ...
      },3000),
    
    })