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);
},
/
js arguments/ scrolling VueComponent {}
还有个⽴即执⾏版本。按照字⾯意思就是触发了时间⽴即执⾏。所以这样来看，防抖函数应⽤场景为点击事件，防⽌⽤户点击太快⽽连续发送重复的请求，浪费资源。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。