lodash的debounce函数的使用(实现防抖)

最近在react的新项目中使用了lodash类库中的debounce方法

// 如果是ts还需要引入@types/lodash
import debounce from 'lodash/debounce'

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

window.addEventListener('click', function (event) {
     var p = document.createElement('p')
     p.innerHTML = 'hahahahh'
     document.body.appendChild(p)
})
 //此时的每一次点击都会触发dom元素的改变，如果连续点击的情况下后果可想而知

引入debounce

window.addEventListener('click', debounce(function (event) {
    var p = document.createElement('p')
    p.innerHTML = 'hahahha'
    document.body.appendChild(p)
    return 'hellow'
}, 500))
//这样，即使用户连续点击，那么也只有在最后一次点击的500ms后，真正的函数func才会触发。