什么是节流和防抖?有什么区别?为什么做这个处理?
节流:
规定时间内高频触发事件,在n秒内只会执行一次,这里的主要是稀释了函数执行的频率
- 实现思路 触发函数时都去判断是否有正在执行的延迟函数 ,有则return
啥都不说先上代码
function throttle(fn){let canpass = true; //保存一个标记return function() {!canpass&&return; //判断是否可以或者有无延迟函数在处理canpass = false; //将通行证设置为不可通过setTimeout(()=>{ //将处理函数放在延迟函数中执行fn.apply(this,argument);canpass = true; //处理函数执行完毕以后将通行证改为可通行},500)}}function Todeal() { //你需要触发的函数console.log('123456789');}有人可能会问如果传入的处理函数是个异步的该怎么办,我们来修改下throttlefunction throttle(fn){let canpass = true; //保存一个标记return function() {!canpass&&return; //判断是否可以或者有无延迟函数在处理canpass = false; //将通行证设置为不可通过fn.apply(this,argument); //将函数执行放在外面 通行证而后修改setTimeout(()=>{ //将处理函数放在延迟函数中执行canpass = true; //处理函数执行完毕以后将通行证改为可通行},500)同理也可以setTimeout(async function(){await fn.apply(this,argument);canpass = true;},500)}}
防抖
高频触发事件时在n秒内只会执行一次,如果这中间有再次触发执行,就会清除之前的执行重新来过
- 思路主要是去处理当触发时去终结掉之前的执行,只执行现在的操作
function stabili(fu) {let timeout = null; //标记一个变量存放定时器return function() {clearTimeout(timeout);timeout = setTimeout(()=> {fu.apply(this, arguments);},500)}}
现在来看对于区别一目了然
防抖在时间内去执行最后一次的触发,而节流是在时间内只执行一次当时间内执行完后可以再次执行下一次
所以具体使用根据 当前需求而定选择