防抖和节流 - HelloWorld开发者社区

防抖

触发高频事件后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.jianshu.com/p/ccb6668cef09，如有侵权，请联系删除。