防抖和节流

什么是防抖?

运用场景:

通常我们搜索引擎的在用户输入时候都应用了防抖策略.

(视口变化页面,onScroll,多次点击,window的resize),为了解决或缓存延迟,卡死或卡顿的现象,让实现的防抖只触发一次.目的:防止重复点击触发事件

原理:在事件被触发N秒后在执行回调函数,如果这n秒内又被触发,则重新计时.

demo:

function  unshake(fn,delay){
    //fn 要节流的函数,规定时间
    let timer = null
    return function (){
        if(timer){
            clearTimer(timer);
        }
        timer = setTimeout(()=>{
            fn.apply(this)
        },delay);
    }
}

什么是节流?

运用场景:

• 懒加载时要监听计算滚动条的位置，但不必每次滑动都触发，可以降低计算的频率，而不必去浪费 CPU 资源；
• 函数执行一次后,规定时间内不会执行第二次(若一直触发,每隔n秒值触发一次)

demo:

const throttle =(fn,wait=50)=>{
    let previous = 0
    return function(...args){
        let now =+new Date()
        if(now-previous>wait){
            previous=now
            fn.apply(this.args)
        }
    }
}
const betterFn=throttle(()=>cosole.log('fn函数执行了'),1000)
setInterval(betterFn,10)

or

function throttling(fn, delay) {
  var lastTime = 0
  //使用闭包避免lastTime每次都初始化
  return function () {
    var nowTime = Date.now()
    if (nowTime - lastTime > delay) {
      lastTime = nowTime //记录最后
    }
  }
}
const throttlingFn = throttling(() => console.log('fn执行了'), 1000)
setInterval(throttlingFn, 2000)

Promise 节流 &高阶防抖 写法

高频事件触发，在n秒内只会执行一次，节流会稀释函数的执行频率,等待lock的状态，如果lock状态为false，则不会再次执行语句if (!lock) return;后面的内容，直至等待setTimeout函数内容执行完毕，将lock置为true之后，才会再次执行，从而达到减少fn响应次数。

理念：每次触发事件时都判断当前是否有等待执行的延时函数