js的节流与防抖方法封装

简介

节流（Throttling）和 防抖（Debouncing） 是防止频繁触发函数执行的两种技术，它们的目标都是减少函数的执行次数。

区别

防抖（Debouncing） ：当用户停止触发事件后，经过一段时间后才执行函数。如果用户在设定的时间内再次触发事件，则重新开始计时。
节流（Throttling） ：确保一定时间内只触发一次函数。如果你设置了节流，那么在设定的时间内，无论用户触发了多少次操作，函数只会执行一次。

使用场景

防抖

1. 点击事件：避免用户多次点击触发
2. 输入框搜索： 用户输入完成后一段时间再去触发，减少请求，提高用户搜索体验
3. 窗口大小自适应： 在用户对窗口停止操作后，再去重新计算布局。

节流

1. 接口请求： 避免用户高频请求造成内存消耗，确保一定时间内只请求一次
2. 页面滚动： 一定时间内触发一次滚动事件，降低请求次数，提高页面性能。
3. 鼠标hover事件： 确保一定时间以内，执行一次鼠标经过时间， 降低请求，提高性能。

方法封装

1. 防抖函数

/**
 *fun 要防抖的函数
 *delay 延迟的时间
 **/
const debounce = (fun, delay) => {
  let timer;
  return function (...args) {
    if (timer) {
      clearTimeout(timer)
    }
    timer = setTimeout(() => {
      fun.apply(this, args)
    }, delay)
  }
}

2. 节流函数

/**
 *fun 要防抖的函数
 *delay 延迟的时间
 **/
const throttle = (fun, delay) =>  {
  //开始时间
  var timer;
  return function () {
    //判断timer是否有值（是否开启定时器）
    if (!timer) {
      timer = setTimeout(function () {
      	//关闭定时器
        fun();
        //开启定时器
        timer = undefined;
       }, delay)
    }
  }     
}