博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

lodash的debounce函数

Posted on 2019-06-13 14:43  追风0315  阅读(4008)  评论(0编辑  收藏  举报

先简单介绍一下debounce,从最简单的一个场景入手,当用户不断点击页面,短时间内频繁的触法点击事件,只有在用户触法事件后的ns时间内,没有再触法事件,真正的监听函数才会执行,如果在这段时间内再次触法了事件,就需要重新计算这个ns。

debounce最主要的作用是把多个触法事件的操作延迟到最后一次触法执行,在性能上做了一定的优化。

 

不使用debounce

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

 

使用debounce

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

 

更多看这个文章吧

https://segmentfault.com/a/1190000015312430