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 {}
原文：https://www.cnblogs.com/cloudbarrychen/p/14944288.html