防抖和节流的概念



在前端的面试中我们经常会听到面试官问到什么是防抖与节流？会需要我们详细的讲解他们各自的用法，以及不同点。

为此特地全面的讲解一下防抖与节流，在加深对二者的理解，同时方便大家参考。首先提出几个问题，希望大家带着问题来看这篇文章：

1. 什么是防抖与节流？
2. 他们之间有什么联系，为什么总是一起问？
3. 他们之间的不同点是什么？
4. 他们各自的使用场景是什么？
5. 如何封装防抖与节流

2.1 定义

防抖（debounce），在一段时间内多次执行相同函数，但只会触发最后一次函数调用。通俗一点讲就是设置一个规定时间（假设是一秒钟），在规定时间内触发事件函数都会使时间重新计时，当规定时间过了直接执行最后一次事件函数；

2.2 使用场景

1. 按钮重复点击；
2. 搜索条的输入搜索；
3. 输入验证；

2.3 实现原理

1. 利用setTimeout定义一个规定时间；
2. 当规定时间内再次触发了时间，则清空定时器重新计时；
3. 当规定时间结束后执行最后一次事件函数；

2.4 防抖函数封装

3.1 定义

节流（throttle）在一段时间内多次执行相同函数，但只会触发第一次函数调用。通俗一点讲就是设置一个规定时间（假设是一秒钟），在规定时间内触发事件函数只会执行第一次；如果在规定的时间间隔内再次触发事件，函数不会被执行，直到时间间隔结束。

3.2 使用场景

1. 表单提交按钮避免重复点击，重复调用接口；
2. 页面加载时的资源加载；
3. 滚动事件；
4. 窗口大小调整监听；
5. 输入框的重复输入搜索；

3.3 实现原理

1. 利用setTimeout定义一个规定时间；
2. 在规定时间内只执行一次函数；
3. 如果规定时间没到则不执行事件函数，反之执行；

3.4 防抖函数封装

4.1 相同点

1. 都是用来实现前端性能优化的不同方式；
2. 主要用于控制事件函数的执行频率；

4.2 不同点

1. 防抖是在规定时间内执行最后一次函数；
2. 节流是在规定时间内执行第一次函数；
3. 节流会在规定时间内一次又一次的执行，可以想象雨滴匀速下落；
4. 防抖是在规定时间内重复触发都会重新计时，类比输入框不停的打字当停下后再去调用搜索；

防抖（Debounce）和节流（Throttle）是都是常用的前端优化技术，用于控制函数的执行频率，但它们的实现原理和应用场景有所不同。

需要理解他们各自的实现原理，从而在日常开发中使用到对应场景中。

版权声明：

本文来源网络，所有图片文章版权属于原作者，如有侵权，联系删除。

本文网址：https://www.mushiming.com/mjsbk/12472.html