<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>防抖和节流</title>
</head>
<body>
<input type="button" value="按钮" class="btn">
<span class="text"></span>
<script>
// 防抖：当持续触发事件，一段时间内没有在触发事件，事件处理函数才会执行一次 （另一个现象，一致触发一直不执行，至到触发停止，函数才会执行）
/* var btn = document.querySelector('.btn')
var info = document.querySelector('.text')
var num = 0
var timer = null （属于防抖函数）
btn.addEventListener('click', function () {
============================================
if (timer) {
clearTimeout(timer)
timer = setTimeout(function () {
info.innerHTML = num++
}, 2000)
} else {
timer = setTimeout(function () {
info.innerHTML = num++
}, 2000)
}
=============================================
代码的简化写法
if(timer!==null){//不为空时执行，清除之前的额定时器，执行 新的定时器
clearTimeout(timer)
}
timer = setTimeout(function () {//不管上述情况如何，都会执行这部分代码
info.innerHTML = num++
}, 2000)
}) */
/* 节流：当事件持续触发时，保证一段时间内只触发一次函数 */
var btn = document.querySelector('.btn')
var info = document.querySelector('.text')
var num = 0
var isTimer = true
btn.addEventListener('click', function () {
if (!isTimer) {//不为真就返回
return false
}//隐含的意思是为真就继续执行
isTimer = false//让isTimer为假
timer = setTimeout(function () {
info.innerHTML = num++
isTimer = true
}, 2000)
})
</script>
</body>
</html>
