防抖与节流是前端开发中常用的性能优化手段，本文将详细介绍防抖与节流的概念、应用场景、实现方式以及优缺点。
简单来说，防抖函数会推迟函数的执行，直到过了一定时间间隔后，函数被执行。如果在这个时间间隔内再次调用该函数，则重新计时。
- 搜索框输入联想 当用户输入搜索关键字时，不会立即发送请求，而是等待用户输入完成后再发送请求。
- 按钮提交事件 防止用户在短时间内多次点击提交按钮，导致多次提交表单。
- 浏览器窗口调整事件 当用户调整浏览器窗口大小时，不会立即触发 resize 事件，而是等待用户停止调整窗口大小后再触发。当然这种情况使用节流可能更合适，后文会详细介绍。
- 方法1： 使用setTimeout（推荐）
- 方法2: 使用时间戳
试着使用一下：
我们来设置一个场景，在没有防抖的情况下，鼠标划过一个元素，会打印:
使用防抖函数后：
鼠标不停滑动，不打印，停下1秒后打印。
如果我们希望在防抖函数中添加立即执行的功能，可以通过设置一个 参数来实现。
还是刚刚那个场景
当我们设置为时，鼠标第一次进入元素时会立即打印，之后的行为和普通防抖一样。 当设置的时间过去之后，我们再次划入元素，还是会立即打印，并且在无划动的情况下，1秒后再次打印。
- 优点：防抖函数可以有效减少函数的执行次数，提高性能。
- 缺点：如果函数需要立即执行，可能会导致延迟执行的问题，但是通过加强版防抖函数可以解决这个问题。
节流函数会限制函数的执行次数，确保函数在一定时间间隔内只执行一次。例如，如果设置一个 1000ms 的节流函数，那么在 1000ms 内，无论调用多少次，函数只会执行一次。
- 埋点上报 在用户滚动页面时，需要上报滚动位置，但是不希望频繁上报，可以使用节流函数。
- 拖拽事件 在拖拽元素时，需要频繁计算元素的位置，我们可以使用节流函数来减少计算次数，提高性能。
- 使用isThrottle标志
- 使用时间戳
鼠标不停滑动，1秒内只打印一次，非常好。 问题在于，当我们停下鼠标后，最后一次的不会打印，因为我们设置的是1秒内只执行一次。
比如在下面这个搜索框中，用户在0-1秒内输入了，在1-1.5秒内输入了和，之后停止了输入，我们就会丢失这个输入，因为它在第二个1秒内被忽略了。
加强版的节流加入了 的兜底功能，既能避免函数频繁调用，又能确保在用户停止操作后执行一次函数。
用户在秒输入，在秒输入和，之后停止输入，我们能够打印出。
防抖和节流是前端开发中常用的性能优化手段，可以有效减少函数的执行次数，提高性能。防抖函数会推迟函数的执行，直到过了一定时间间隔后，函数被执行；节流函数会限制函数的执行次数，确保函数在一定时间间隔内只执行一次。 加强版的防抖在原有的基础上增加了立即执行的功能，加强版的节流在原有的基础上增加了 的兜底功能，保证最后一次的执行。
版权声明：
本文来源网络，所有图片文章版权属于原作者，如有侵权，联系删除。
本文网址：https://www.mushiming.com/mjsbk/15905.html