JavaScript 防抖-节流函数原理和实现

2020-06-17 每日一题：防抖和节流函数

本文也在我的blog上发布：跳转博客

题目

const debounse = (fn,delay)=>{
    // 介绍防抖函数原理，并实现
}
const throttle = (fn,delay=500)=>{
    // 介绍节流函数原理，并实现
}

引子

第一次接触防抖和节流函数是在大一完成web学习的第一个项目时，当时需要对鼠标滚轮进行监听，但是滚轮一次会触发很多很多次事件。由此接触到了防抖和节流函数。所以如果用一句话概括一下防抖和节流函数，我的表达就是：防止一个函数被连续快速多次触发，消耗太多资源或者造成预期外的效果。

防抖函数or节流函数？

防抖函数和节流函数都可以防止操作被连续触发，那么他们的区别是什么呢？

防抖函数：在事件触发n秒后再执行回调，如果这期间再次触发，则重新计时

节流函数：在一定时间内，只能触发一次函数

倘若一个按钮绑定了某一事件，而这个按钮被连续不断的快速点击，防抖函数会等到停止点击n秒后才触发，而防抖函数每隔一段时间就会被触发一次。

所以由此可知，防抖函数和节流函数的使用场景分别为：

防抖函数：需要保证提交信息为最新的时候，比如登录，滑块等。

节流函数：需要一个较缓的频率提交一直变化的值时，如搜索推荐项。

代码实现：

const debounse = (fn,delay)=>{
    let timer = null;
    return (...args)=>{
        //清除定时器
        clearTimeout(timer)
        timer = setTimeout(()=>{
            fn.apply(this.args);
        },delay)
    }
}

const throttle = (fn,delay=500)=>{
    let flag = true;
    return (...args)=>{
        if(!flag){
            return;
        }
        flag = false;
        // 开始计时
        setTimeout(()=>{
            fn.applay(this,args);
            flag = true;
        },delay);
    }
}