js 防抖与节流函数之详细解析

1、防抖 debounce

简而言之就是延迟函数的执行。

网上一搜，基本上都是给你写下面那么一个函数，但是为何要这么写，却没人告诉你；而我自己也是看得云里雾里。

// 非立即执行版
function debounce(func, wait) {
  let timer = null;
  return () => {
    // 闭包
    let args = arguments; // arguments 中存着匿名函数的参数

    if (timer) clearTimeout(timer);

    timer = setTimeout(() => {
      func.apply(this, args); // 改变this指向， 传入参数
    }, wait);
  };
}

现在逐一解析为什么要这样写。

外层函数定义一个变量来装定时器，而它的返回值是一个匿名函数，所以就成为了闭包；

由于闭包用了外层函数的变量，所以js垃圾回收机制是不会回收 timer 这个变量的，timer 会一直存在于内存之中；

arguments 为匿名函数参数列表，它是个伪数组；即使匿名函数没有定义形参，等用户调用函数的时候加了实参， arguments 也会接收实参，以数组的形式。

apply 改变 this 指向，会立即执行，第二个参数为传入的参数，是个数组；那么第一个参数 this 是什么意思，这里的this指向了谁？

显然，在浏览器环境下运行的话，这里的this就是指的window对象，因为没有另外的对象调用它；

如果在vue组件里，这里的this指向谁？ 

VueComponent

指向了当前组件。

mounted:

document.addEventListener('scroll', this.debounce(this.scroll, 300));

method:

scroll() {
      console.log('scrolling', this);
    },

// scrolling VueComponent {}

 

还有个立即执行版本。按照字面意思就是触发了时间立即执行。所以这样来看，防抖函数应用场景为点击事件，防止用户点击太快而连续发送重复的请求，浪费资源。