throttle 函数与 debounce 函数
标签:
JavaScript
某些操作会导致 DOM 事件频繁被触发,从而频繁调用事件监听函数,如果事件监听函数中执行的是 DOM 操作或加载资源等比较耗费计算机资源的任务时,会导致浏览器反应迟钝甚至崩溃。throttle 函数与 debounce 函数通过使用一些技巧,减少监听函数的执行频率,适用于浏览器的 resize、scroll 事件以及通过文本框 keyup 事件进行 Ajax 请求等操作。
throttle 函数
throttle 函数又称为节流函数。我们可以把水滴理解成事件监听函数,如果我们打开水龙头,水滴会连续不断地涌出,就相当于事件监听函数会连续不断地执行。如果我们将水龙头拧到最小,让水滴一滴一滴地流出,就相当于我们让事件监听函数按照一定的时间间隔来执行。
function throttle (func, wait) { var lastInvokeTime = 0 return function () { var time = Date.now() if (time - lastInvokeTime >= wait) { func() lastInvokeTime = time } } }// handler 是事件监听函数var handler = function () { console.log('throttle') }window.onscroll = throttle(handler, 300)
以上代码中,当连续触发 window 的 scroll 事件的时候,不会连续调用 handler 函数,会保证 handler 函数连续调用的最小时间间隔为 300 毫秒。
debounce 函数
debounce 函数又称为防抖动函数。我们可以把拍照理解成事件监听函数,当我们按下快门的时候,手可能在抖动,这时候照相机不会立即拍照,它会等待我们的手停止抖动之后再拍照,就相当于当我们连续触发事件的时候,事件监听函数不会立即执行,而是等我们一段时间内不再触发事件的时候,再执行事件监听函数。
function debounce (func, wait) { var timer = null return function () { clearTimeout(timer) timer = setTimeout(func, wait) } }// handler 是事件监听函数var handler = function () { console.log('debounce') }window.onscroll = debounce(handler, 300)
以上代码中,当连续触发 window 的 scroll 事件的时候,不会连续调用 handler 函数,会等到持续 300 毫秒都没有 scroll 事件触发的时候,才调用 handler 函数。
作者:Karmack
链接:https://www.jianshu.com/p/38f4b0289e5b
点击查看更多内容
为 TA 点赞
评论
共同学习,写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦