本篇文章给大家浅谈一下 JavaScript 中的函数防抖与函数节流. 有一定的参考价值, 有需要的朋友可以参考一下, 希望对大家有所帮助.
防抖 (debounce)
名词解释: 在事件被触发 n 秒后再执行回调函数, 如果在这 n 秒内又被触发, 则重新计时.
使用场景: 以百度输入框例, 比如你要查询 XXx, 想实现输完了 XXx 之后, 再进行搜索请求, 这样可以有效减少请求次数, 节约请求资源.
函数防抖简单实现
- <script type="text/javascript">
- Windows.onload = function () {
- function Ajax(content) {// 模拟 Ajax 请求
- console.log('ajax request' + content)
- }
- function debounce(fun, delay) {
- return function (arguments) {
- // 获取函数的作用域和变量
- let that = this;
- let args = arguments;
- clearTimeout(fun.id)// 清除定时器
- fun.id = setTimeout(function () {
- fun.call(that, args )
- }, delay)
- }
- }
- let debounceAjax = debounce(Ajax, 1000)
- XXX.addEventListener('keyup', function (e) {
- debounceAjax(e.target.value)
- })
- }
- </script>
节流 (throttle)
名词解释: 连续执行函数, 每隔一定时间执行函数. 规定一个单位时间, 在这个单位时间内, 只能有一次触发事件的回调函数执行, 如果在同一个单位时间内某事件被触发多次, 只有一次能生效.
使用场景: 鼠标连续多次 click 事件, mousemove 事件, 监听滚动事件, 比如是否滑到底部自动加载更多等等...
函数节流简单实现
- function throttle(fn, delay) {
- let lastTime;
- let timer;
- delay || (delay = 300); // 默认间隔为 300ms
- return function(arguments) {
- let context = this;
- let args = arguments;
- let nowTime = +new Date(); // 获取系统当前的时间
- if (lastTime && nowTime < lastTime+ delay) { // 当前距离上次执行的时间小于设置的时间间隔
- clearTimeout(timer); // 清除定时器
- timer = setTimeout(function() { // delay 时间后, 执行函数
- lastTime= nowTime ;
- fn.apply(context, args);
- }, delay);
- } else { // 当前距离上次执行的时间大于等于设置的时间, 直接执行函数
- lastTime= nowTime ;
- fn.apply(context, args);
- }
- };
- }
区别:
可以用日常进入电梯来举例, 形象地描述节流和防抖的区别
函数防抖: 如果 A 在 10:00:00 开门走入电梯内 (触发事件), 如果后续没有人进入电梯, 电梯将在 5 秒钟之后 10:00:05 关门 (执行事件监听器). 这时如果 B 在 10:00:04 走入电梯内, 电梯会在 10:00:09 才关门.
函数节流 : 如果 A 在 10:00:00 开门走入电梯内 (触发事件), 如果后续没有人进入电梯, 电梯将在 5 秒钟之后 10:00:05 关门 (执行事件监听器). 这时如果 B 在 10:00:04 走入电梯内, 电梯同样是在 10:00:05 关门. 这个时间从第一个人进入电梯开始计时, 不管在 5 秒之内进来多少人, 电梯都会在 10:00:05 关门. 如果一直没有人进来, 则电梯不运行.
总结:
根据实际业务场景, 合理的利用 debounce(防抖) 和 throttle(节流) 可以优化性能和提高用户体验.
效果:
函数防抖是某一段时间内只执行一次;
函数节流是间隔时间执行, 不管事件触发有多频繁, 都会保证在规定时间内一定会执行一次真正的事件处理函数.
原理:
防抖是维护一个计时器, 规定在 delay 时间后触发函数, 但是在 delay 时间内再次触发的话, 都会清除当前的 timer 重新计时. 这样一来, 只有最后一次操作事件才被真正触发.
节流是通过判断是否到达一定时间来触发函数, 若没到规定时间则使用计时器延后, 而下一次事件则会重新设定计时器.
本文转载自: https://segmentfault.com/a/1190000018266110
更多 web 前端开发 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/web/javascript/16972.html