JS函数防抖节流 JS函数防抖节流

文章图片

在前端开发中有一部分用户行为会频繁出发事件执行。而对于DOM操作、资源加载等耗性能的处理，很可能导致界面卡顿，甚至浏览器崩溃。函数节流（throttle）和函数的防抖（debounce）就是为了解决类似需求应运而生

秒懂它们的概念函数防抖（debounce）和函数节流（throttle）都是为了缓解函数频繁调用，它们相似，但有区别

文章图片
如上图，一条竖线代表一次函数调用，函数防抖是间隔超过一定时间后才会执行，函数节流是一定时间段内只执行一次
节流(throttle) 函数节流就是预定一个函数只有大于等于执行周期时才执行，周期内调用不执行。好像水滴攒到一定重量才会落下一样。
通俗来讲节流，就是指连续触发事件但是在 n 秒中只执行一次函数。节流会稀释函数的执行频率

窗口调整(size)
页面滚动(scroll)
抢购疯狂点击(mousedown)

【JS函数防抖节流】时间戳版实现：

function throttle(func, delay) { let last = 0return function () { let now = +new Date()if (now - last > delay) { func.apply(this, arguments) last = now } } }

定时器版实现：

function throttle(func, wait) { var timeoutreturn function (){ var _this = this var args = argumentsif (!timeout) { timeout = setTimeout(function (){ timeout = null func.apply(_this, args) }, wait) } } }

我们应该可以很容易的发现，其实时间戳版和定时器版的节流函数的区别就是，时间戳版的函数触发是在时间段内开始的时候，而定时器版的函数触发是在时间段内结束的时候
防抖(debounce) 防抖函数就是在函数需要频繁触发情况下，只有足够空闲的时间，才执行一次。好像公家车司机会等人都上车后才出站。
通俗来讲防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间

实时搜索(keyup)
拖拽(mousemove)

function debounce(func, delay){ var timer = nullreturn function (){ var _this = this, args = argumentsclearTimeout(timer) timer = setTimeout(function (){ func.apply(_this, args) }, dealy) } }

参考一图秒懂函数防抖和函数节流