首页 > 其他 > 详细

lodash的debounce函数的使用

时间:2019-09-26 19:28:30      阅读:202      评论:0      收藏:0      [点我收藏+]

最新,在react新项目的开发中使用到了lodash类库的debounce方法,就随手梳理了一下此方法的方便之处

技术分享图片

未使用debounce之前

如果不考虑使用debounce,那么在用户连续点击的情况之下,会在每一次点击之后就会执行自定义函数的回调,这时如果你的回调中处理一些比较消耗内存的一些操作,或者调用接口之类,那么可能会导致阻塞甚至于项目崩溃。

例如:

window.addEventListener(‘click‘, function (event) {
     var p = document.createElement(‘p‘)
     p.innerHTML = ‘trigger‘
     document.body.appendChild(p)
})

此时的每一次点击都会触发dom元素的改变,如果连续点击的情况下后果可想而知

引入debounce

window.addEventListener(‘click‘, debounce(function (event) {
    var p = document.createElement(‘p‘)
    p.innerHTML = ‘trigger‘
    document.body.appendChild(p)
    return ‘aaaa‘
}, 500))

这样,即使用户连续点击,那么也只有在最后一次点击的500ms后,真正的函数func才会触发。

这只是对debounce的初步了解,后续更新中

 

 

 

lodash的debounce函数的使用

原文:https://www.cnblogs.com/zjknb/p/11593145.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!