你们都会的防抖与节流

这一篇文章我想写一下防抖与节流，因为我自己不是很理解而且说实话，以前知道，但是老忘，虽然概念还有一些简单的写法会，但还是缺乏练习和深刻的理解。当我们不加防抖或节流的时候就像这样，鼠标滑过触发这么多次，所以我们一个使用防抖或节流来限制它的请求次数而不是触发次数。关于防抖与节流的应用和解释自行查找资料。<div id=“app”></div>function fn(e) { console.log(this); console.log(e); app.innerHTML = num ++;}1.防抖简单实现function debounce(fn, delay) { let timer = null; return function(){ clearTimeout(timer); timer = setTimeout(function () { fn(); }, delay); }}使用节流后app.onmousemove = fdebounce(fn, 1000);我们发现次数减少了太多，因为只要你在delay时间内不停地触发就不会执行直到你的间隔时间大于delay才会执行。我们来看一下this和event。this是window，event是undefined。修复this指向和事件参数function debounce(fn, delay) { let timer = null, that; return function(e){ that = this; clearTimeout(timer); timer = setTimeout(function () { //this指向window（非严格模式） fn.apply(that, [e]); }, delay); }}或者是function debounce(fn, delay) { let timer = null; return function(e){ clearTimeout(timer); timer = setTimeout(()=>{ //箭头函数 fn.apply(this, [e]); }, delay); }}增强版（是否立即执行）function debounce(fn, delay, immediate) { let timer = null, that; return function (e) { that = this; clearTimeout(timer); if(immediate){ //是否立即执行 if(!timer){ // 如果没有设置定时器就先执行 fn.apply(that, [e]); } timer = setTimeout(function () { timer = null;// 设置定时器，使其在delay毫秒内不能执行，过了delay毫秒后在执行 }, delay); }else{ //否则延时执行 timer = setTimeout(function () { fn.apply(that, [e]) }, delay); } };}//这个if…else只能执行一个，要不先执行，要不延时执行一开始会执行一次，因为录制不能显示鼠标所以理解一下。节流简易版（时间戳）function throttle(fn, delay) { let last = 0, //上次执行时间 now; //执行时的时间 return function (e) { now = Date.now(); //当前时间 if(now - last >= delay){ //如果两次时间间隔大于delay，就执行 last = now; //重新赋值 fn(); } };}在规定时间delay毫秒内总会执行一次事件。setTimeout版本（修复this指向和事件参数）function throttle(fn, delay) { let that, timer = null; return function (e) { that = this; if(!timer){ //如果没设置定时器就执行 timer = setTimeout(function () { fn.apply(that, [e]); timer = null; //果delay毫秒就设置timer，这样就能delay执行一次 }, delay); } };}修复this指向和事件参数（时间戳）function throttle(fn, delay) { let last = 0, //上次执行时间 now; //执行时的时间 return function (e) { now = Date.now(); //当前时间 if(now - last >= delay){ //如果两次时间间隔大于delay，就执行 last = now; //重新赋值 fn.apply(this, [e]); } };}区别时间戳版本的会先执行setTimeout版本的会后执行所以可以结合一下他们两个。结合版function throttle(fn, delay) { let last = 0, //上次执行时间 now, //当前时间 leftTime, //剩余时间 that, timer = null; return function (e) { that = this; now = Date.now(); leftTime = delay - (now - last); if(leftTime <= 0){ //保证一开始就执行（先执行） last = now; fn.apply(that, [e]); }else{ timer = setTimeout(function() { //延时执行 fn.apply(that, [e]); timer = null; },delay) } };}这样做总体思路没错，但是第一次会执行以后就是两个一起执行，因为条件都满足。修改function throttle(fn, delay) { let last = 0, now, leftTime, that, timer = null; return function (e) { that = this; now = Date.now(); leftTime = delay - (now - last); if(leftTime <= 0){ if(timer){ //如果有定时器就清除 clearTimeout(timer); timer = null; } last = now; fn.apply(that, [e]); }else if(!timer){ timer = setTimeout(function() { last = now; //如果时间满足就让他不满足 //总之除了第一次就只让其中一个执行 fn.apply(that, [e]); timer = null; },delay) } };}一开始执行一次（时间戳），最后停止在执行一次（setTimeOut）。