微信小程序 防抖和节流

防抖

不管函数触发了多少次，只有在最后一次触发函数后，走完 setTimeout，再执行。

节流

第一次触发函数时执行，等待 setTimeout 走完后，再次触发函数，才执行。

tool.js

// 防抖
function debounce(fn, interval) {
  var timer;
  var gapTime = interval || 500
  return function() { 
    clearTimeout(timer)
    var that = this;
    timer = setTimeout(function (){
      fn.call(that);
    }, gapTime);
  }
}

// 节流
export function throttle(fn, interval = 500) {
    let flag = false;
    return function() {
      if(!flag) {
        flag = true
        fn.apply(this, arguments);
        setTimeout(() =>  {
            flag = false
        }, interval)
      }
    }
}

export default {
  debounce,
  throttle
}

使用

import tool from "../../utils/tool.js";

Page({
   data:{
    	num: 2
   },
   
   gotoUnlock: tool.debounce(function() {
      console.log(this)
   }),
   
   onPageScroll: tool.throttle(function(msg){
      console.log(this)
   }),
})