本文主要是介绍防抖与节流详细讲解,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
一、前言
在前端的面试中我们经常会听到面试官问到什么是防抖与节流?会需要我们详细的讲解他们各自的用法,以及不同点。
为此特地全面的讲解一下防抖与节流,在加深对二者的理解,同时方便大家参考。首先提出几个问题,希望大家带着问题来看这篇文章:
- 什么是防抖与节流?
- 他们之间有什么联系,为什么总是一起问?
- 他们之间的不同点是什么?
- 他们各自的使用场景是什么?
- 如何封装防抖与节流
二、防抖(debounce)
2.1 定义
防抖(debounce),在一段时间内多次执行相同函数,但只会触发最后一次函数调用。通俗一点讲就是设置一个规定时间(假设是一秒钟),在规定时间内触发事件函数都会使时间重新计时,当规定时间过了直接执行最后一次事件函数;
2.2 使用场景
- 按钮重复点击;
- 搜索条的输入搜索;
- 输入验证;
2.3 实现原理
- 利用setTimeout定义一个规定时间;
- 当规定时间内再次触发了时间,则清空定时器重新计时;
- 当规定时间结束后执行最后一次事件函数;
2.4 防抖函数封装
// 防抖函数封装
const _debounce = (fn, delay) => {// 利用闭包定义定时器id变量存储let timer = null;return () => {// 如果有值就清除定时器,重新计时if (timer) {clearTimeout(timer)}timer = setTimeout(fn, delay);}
};
// 窗口大小发生改变触发函数
const onResize = () => {console.log("界面窗口发生改变");
};
// 监听窗口大小发生变化
window.addEventListener('resize', _debounce(onResize, 500));
三、节流(throttle)
3.1 定义
节流(throttle)在一段时间内多次执行相同函数,但只会触发第一次函数调用。通俗一点讲就是设置一个规定时间(假设是一秒钟),在规定时间内触发事件函数只会执行第一次;如果在规定的时间间隔内再次触发事件,函数不会被执行,直到时间间隔结束。
3.2 使用场景
- 表单提交按钮避免重复点击,重复调用接口;
- 页面加载时的资源加载;
- 滚动事件;
- 窗口大小调整监听;
- 输入框的重复输入搜索;
3.3 实现原理
- 利用setTimeout定义一个规定时间;
- 在规定时间内只执行一次函数;
- 如果规定时间没到则不执行事件函数,反之执行;
3.4 防抖函数封装
const _throttle = (fn, delay) => {let timer = null;return () => {if (!timer) {timer = setTimeout(() => {fn();timer = null;}, delay);}}
};
// 窗口大小发生改变触发函数
const onResize = () => {console.log("界面窗口发生改变");
};
// 监听窗口大小发生变化
window.addEventListener('resize', _throttle(onResize, 500));
四、防抖与节流的区别
4.1 相同点
- 都是用来实现前端性能优化的不同方式;
- 主要用于控制事件函数的执行频率;
4.2 不同点
- 防抖是在规定时间内执行最后一次函数;
- 节流是在规定时间内执行第一次函数;
- 节流会在规定时间内一次又一次的执行,可以想象雨滴匀速下落;
- 防抖是在规定时间内重复触发都会重新计时,类比输入框不停的打字当停下后再去调用搜索;
五、总结
防抖(Debounce)和节流(Throttle)是都是常用的前端优化技术,用于控制函数的执行频率,但它们的实现原理和应用场景有所不同。
需要理解他们各自的实现原理,从而在日常开发中使用到对应场景中。
这篇关于防抖与节流详细讲解的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!