参考地址:https://yuchengkai.cn/docs/zh/frontend/#%E9%98%B2%E6%8A%96

参考地址:https://mp.weixin.qq.com/s/Vkshf-nEDwo2ODUJhxgzVA

目录

防抖

 延迟的防抖动函数:

改进版(立即执行的防抖动函数)

节流

使用时间戳的节流方案

使用时间戳&＃43;定时器版的节流方案

防抖

当持续触发事件时&＃xff0c;一定时间段内没有再触发事件&＃xff0c;事件处理函数才会执行一次&＃xff0c;如果设定的时间到来之前&＃xff0c;又一次触发了事件&＃xff0c;就重新开始延时&＃xff0c;知道用户不在触发后的一定时间内才执行该处理函数。

 延迟的防抖动函数:

该实现思路很简单&＃xff0c;就是将执行函数放到一个定时器中&＃xff0c;如果在定时器触发之前没有事件执行&＃xff0c;那么就触发该执行函数&＃xff0c;否则清空定时器

问题:该方法不能立即执行...

//防抖函数
const debounce &＃61; (fn, wait &＃61; 1000) &＃61;> {let timer &＃61; 0;return function (...args) {if (timer)clearTimeout(timer)timer &＃61; setTimeout(() &＃61;> {fn.apply(this, args);}, wait);}}

测试: 

function handle(...args) {console.log(&＃39;我被执行了&＃39;,args);}let fn&＃61;debounce(handle);window.addEventListener(&＃39;scroll&＃39;,()&＃61;>fn(1,2,3));

改进版(立即执行的防抖动函数)

const debounce &＃61; (fn, wait &＃61; 1000,immediate&＃61;true) &＃61;> {let timer,context,args//延迟执行函数const later&＃61;()&＃61;>setTimeout(()&＃61;>{timer&＃61;null;if(!immediate){fn.apply(context,args);context&＃61;args&＃61;null}},wait);//这里的函数是每次实际调用的函数return function(...params){//如果没有创建延迟执行函数则创建if(!timer){timer&＃61;later();//如果是立即执行函数if(immediate){fn.apply(this,params);}else{context&＃61;thisargs&＃61;params}}else{//如果已有延迟执行函数&＃xff0c;调用的时候则清除原来的并重新设置一个clearTimeout(timer);timer&＃61;later()}}}

节流

节流是将多次执行变成每隔一段时间执行&＃xff0c;即n秒内只执行一次。

使用定时器简单版

function throttle(func&＃xff0c;delay&＃61;1000){let canRun&＃61;true;return function(){if(!canRun) return;canRun&＃61;false;setTimeout(() &＃61;> {func.apply(this,arguments);canRun&＃61;true;}, delay);}}

使用时间戳的节流方案

const debounce&＃61;(func,delay&＃61;1000)&＃61;>{let context,args;var prev&＃61;Date.now();return function(...parms){var now&＃61;Date.now();if((now-prev)>&＃61;delay){context&＃61;this;args&＃61;parmsfunc.apply(context,args);prev&＃61;Date.now();}else{context&＃61;args&＃61;null;}} }

使用时间戳&＃43;定时器版的节流方案

const debounce &＃61; (func, delay &＃61; 1000) &＃61;> {let timer &＃61; null;let startTime &＃61; Date.now();return function (...args) {let curTime &＃61; Date.now();let remaining &＃61; delay - (curTime - startTime);clearTimeout(timer);if (remaining <&＃61; 0) {func.apply(this, args);startTime &＃61; Date.now();} else {timer &＃61; setTimeout(() &＃61;> {func.apply(this, args);}, remaining);}}}

注:本文只是自我学习的一次总结&＃xff0c;若有理解错误&＃xff0c;请指出谢谢。