小明今天心情暴躁，過來瀏覽楊小浩的網站，看到一個按鈕，特別的不順眼，然後瘋狂點擊該按鈕，可能他知道楊小浩比較窮，買不起好的服務器，想着瘋狂發送數據到服務端搞崩潰該網站。誰知道楊小浩早就知道他心懷詭計了，只要小明點擊一次，楊小浩就開始計時間，3秒內點擊一次，就重新開始計算時間，直至到時間達到3秒鐘才發送數據。這就是防抖!
放在body內運行
<input type="button" value="按鈕" />
<script type="text/javascript">
const button = document.querySelector('input')
function payMoney() {//發送數據
console.log("發送數據成功")
}
// 防止小明 防抖函數
function debounce(func, delay) {
// func() // 不可以這樣寫 會直接運行
let timer;//程序執行多少時間
return function() {
let context = this;//保存this
let args = arguments;
clearTimeout(timer);//清除延遲
timer = setTimeout(function () {//執行了多少時間
func.apply(context, args);
},delay)
}
}
button.addEventListener("click", debounce(payMoney,1000))
</script>
節流
小明心情不好，想辭職了，因爲窮，所以今天還是去上班了，去到公司，老闆給他一個任務，需要3小時才能完成，但是小明目前手裏面沒有任務只能答應了，一小時後老闆再過來給一個任務給小明，小明拒絕的同時，也拒絕做完目前的任務再做老闆的新的任務。老闆看到任性的小明沒辦法了，5小時後老闆再過來找小明，目前小明手裏面也沒有任務，只能答應了。
節流就是：一段時間內只做一件事（函數），同時也拒絕新的事情。
<input type="button" value="節流" />
<script type="text/javascript">
const button = document.querySelector('input')
function work(){
console.log("做任務")
}
function throttle(func, delay){
let pre = 0;//上一次工作的時間 開始爲0 沒任務
return function () {
let now = new Date()//獲取讀取時間戳
let context = this
let args = arguments
if(now - pre > delay){
func.apply(context, args)
pre = now
}
}
}
button.addEventListener("click", throttle(work,3000))
</script>
總結：
防抖就是規定時間內在最後一次操作開始就是時間，最後一次操作過了規定的時間，又重新開始。
節流就是一開始就計算時間，計算完成又有操作就馬上執行，並開始計算時間
我是楊小浩，我們一起加油！