<!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>
//防抖：触发高频事件后n秒内函数只会执行最后点击的那一次，如果n秒内高频事件再次被触发，则重新计算时间
function stabilization(fn, name) {
//清除上一个执行的定时器
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, '防抖'))
//节流：高频事件触发，但在N秒内点击N次，只会记录执行一次，所以节流会稀释函数的执行频率
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, '节流'))
</script>
</body>
</html>
总结：防抖和节流在某些地方有些类似，都是使用了闭包延迟执行，只不过是使用方法不一样，前者是在N秒内每次点击都会重新计算时间，后者是在N秒内只会执行一次，只要区分清楚还是很容易理解的！
