1溪北、弄懂一般形式的防抖
防抖是在事件被觸發(fā)n秒后再執(zhí)行回調(diào)函數(shù)千诬，如果在這n秒內(nèi)又被觸發(fā)，則重新計(jì)時(shí)允蚣。
常規(guī)寫法如下
//html: <input type="text" id="input">
var debounce = function(fn){
let timeout = null;
return function(){
if(timeout){
clearTimeout(timeout)
}
timeout = setTimeout(() => {
sayHi()
}, 500)
}
}
var sayHi = function(
console.log("Hi," + document.getElementById("input").value);
}
document.getElementById("input").addEventListener("keyup",debounce(sayHi))
（1）debounce方法中為什么用return function(){}?
- 因?yàn)閍ddEventListener中的
debounce(sayHi)是一個(gè)立即執(zhí)行方法，在頁面加載時(shí)就會(huì)執(zhí)行丰榴。如何讓 debounce 不執(zhí)行呢勿负？改寫為回調(diào)函數(shù)即可（使用return function）
//一般的addEventListener寫法
xx.addEventListener("click",function(){})
//防抖中addEventListener寫法
xx.addEventListener("click",debounce())
（2）為什么把let timeout = null; 寫在debouce方法中，而不是寫成全局變量?
-
let timeout = null;也可以寫成全局變量举瑰。
但是因?yàn)?code>debouce(sayHi)在頁面加載時(shí)就會(huì)主動(dòng)執(zhí)行, 所以寫在debouce里面可以避免污染全局環(huán)境timeout變量在return后的function中的作用域鏈中捣辆，所以寫在debounce中更好。
因此也可以把防抖寫成這樣
let timeout = null;
var debounce = function(fn){
if(timeout){
clearTimeout(timeout)
}
timeout = setTimeout(() => {
sayHi()
}, 500)
}
var sayHi = function(){
console.log("Hi," + document.getElementById("input").value);
}
document.getElementById("input").addEventListener("keyup",function(){
debounce(sayHi)
})
2. vue中防抖的寫法
由上面改寫過來變成：
<template>
<div>
<input v-model="answer" @keyup="change" />
</div>
</template>
<script>
export default {
name: "",
data() {
answer: "",
timeout: null
},
method: {
change() {
if(this.timeout){
clearTimeout(this.timeout)
}
this.timeout = setTimeout(() => {
console.log(this.answer)
}, 500);
}
}
}
</script>
