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