防抖实现



函数防抖，就是指触发事件后，在 n 秒内函数只能执行一次，如果触发事件后在 n 秒内又触发了事件，则会重新计算函数延执行时间。

通俗的讲： 一段时间内重复触发，只执行开始一次和结尾一次，或者只执行结尾那次

使用场景：浏览器页面onresize，scroll，mousemove ,mousehover 等，会被频繁触发（短时间内多次触发）的时候就需要用到防抖，或者某些点击事件，防止多次点击造成频繁请求后台。

函数节流,就是指触发事件后，在n秒内函数只能执行一次，如果触发事件后在n秒内又触发了事件，则会再次执行该事件。顾名思义，就是像水管流水一样，有频率的执行。

通俗的讲： 一段时间内重复触发，按一定频率(3s、5s)执行，可配置一开始就执行一次

使用场景：浏览器页面onresize，scroll，mousemove ,mousehover 等，会被频繁触发（短时间内多次触发）的时候就需要用到节流，例如浏览器发生滚动事件时，每3秒或5秒执行一次事件。

1. debounce是一个函数，并且需要传入一个函数handle
2. 传入函数后，我们要传入一个防抖时间wait
3. 需要判断是否立即执行immediate
4. 返回一个一个函数 fn

1. debounce是一个函数，并且需要传入一个函数handle
2. 传入函数后，我们要传入一个节流时间wait
3. 需要判断是否立即执行immediate
4. 返回一个一个函数 fn

节流的使用和防抖一样，参考上面防抖得到使用

防抖和节流在日常开发中经常会遇到，建议将其封装到项目的功能函数中。特别是点击提交按钮时，为了防止用户误点提交多次，可以在内部加一个1s左右的防抖函数。

版权声明：

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

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