<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p id="text">點擊</p>
<p id="text2">點擊2</p>
<script>
//防抖：觸發(fā)高頻事件后n秒內函數(shù)只會執(zhí)行最后點擊的那一次，如果n秒內高頻事件再次被觸發(fā)憋他，則重新計算時間
function stabilization(fn, name) {
//清除上一個執(zhí)行的定時器
let time = null
return function () {
clearInterval(time)
time = setTimeout(() => {
fn.call(this, name, arguments)
}, 500)
}
}
function perform(name) {
console.log(name);
}
//找到標簽元素孩饼，為元素添加一個事件，
let text = document.getElementById('text').addEventListener('click', stabilization(perform, '防抖'))
//節(jié)流：高頻事件觸發(fā)竹挡，但在N秒內點擊N次镀娶，只會記錄執(zhí)行一次，所以節(jié)流會稀釋函數(shù)的執(zhí)行頻率
function throttle(fn, name) {
//把變量存到閉包里
let isLace = true
return function () {
//為false的時候return
if (!isLace) return
isLace = false
setTimeout(() => {
fn.call(this, name, arguments)
isLace = true
}, 500)
}
}
//找到標簽元素揪罕，為元素添加一個事件梯码，
let text2 = document.getElementById('text2').addEventListener('click', throttle(perform, '節(jié)流'))
</script>
</body>
</html>
總結：防抖和節(jié)流在某些地方有些類似，都是使用了閉包延遲執(zhí)行耸序，只不過是使用方法不一樣忍些，前者是在N秒內每次點擊都會重新計算時間，后者是在N秒內只會執(zhí)行一次坎怪，只要區(qū)分清楚還是很容易理解的罢坝！
