在查询的请求中,每输入一个就会进行监听进行查询。那么我们需要做一个防抖节流的优化。
<script>
function getUserAction(e) {
console.log(e);
console.log('执行查询操作',+new Date());
};
function debounce(func, wait) {
console.log('asdad')
var timeout;
return args => {
if (timeout) clearTimeout(timeout)
timeout = setTimeout(func, wait);
}
}
document.getElementById('search').addEventListener('click',debounce(getUserAction, 1000))
</script>
但是,有一个关键的点。在把debounce(getUserAction, 1000)传递给addEventListener进行监听的时候,debounce(getUserAction, 1000) js会默认调用一次
所以在vue中使用是有点不同的
推荐使用loadsh.js这个工具包,里面有_debounce()方法
所以我们在vue中使用debounce,那就在mounted的时候先进行一次调用。然后把返回的函数传递给debounce进行调用。而我们在debounce中使用了闭包也是因为可以把函数进行缓存,并且进行循环调用。