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);
    }
}

你可能感兴趣的:(JavaScript 防抖-节流函数原理和实现)