防抖和节流

Chase620 等级 336 0 0

防抖

触发高频事件后n秒内函数只会执行一次,如果n秒内高频事件再次触发,则重新计算事件

  • 思路
    每次触发的时候取消之前的延时调用方法,以当下为准
//防抖
function debounce(fn){
    let timeout = null;
    return function(){
        clearTimeout(timeout);
        timeout = setTimeout(()=>{
            fn.apply(this,arguments);
        },500)
    }
}

function sayHello(){
    console.log("你好,防抖成功");
}

input = document.getElementById('inp')
input.addEventListener('input',debounce(sayHello)) 

但是以上方法的话 是以第一次执行为准,还可以添加判断,控制直接触发还是最后触发

const deb = (fn, delay, immediate) => {
    let timer = null
    return function() { 
        const context = this
        timer && clearTimeout(timer)
        if (immediate) {
            !timer && fn.apply(context, arguments)
        }
        timer = setTimeout(() => {
                       fn.apply(context, arguments)
                }, delay)
    }
} 

节流

触发高频事件后n秒内只执行一次,只有第一次执行结束才会执行第二次,从而稀释函数的执行频率

  • 基本思路 执行之前判断是否有有等待执行的延时函数,有:本次调用不执行,否则执行
//节流
//此方法的弊端 如果是异步函数无法执行
function throttle(fn){
    //通过闭包保存一个标记
    let canRun = true;
    return function(){
        //在函数开头判断标记是否为true,不为true则return
        if(!canRun){return;}
        //进入执行 标志重置为false
        canRun = false;
        setTimeout(()=>{
            fn.apply(this,arguments);
            //函数执行后设置为true 可以继续执行函数
            canRun = true;
        },500)
    }
}
  function sayHi(e) {
      console.log(e.target.innerWidth, e.target.innerHeight);
    }
    window.addEventListener('resize', throttle(sayHi)); 

本文转自 https://www.helloworld.net/redirect?target=https://www.jianshu.com/p/ccb6668cef09,如有侵权,请联系删除。

收藏
评论区