节流代码
//节流
//定义一个节流阀，取值：true或false
let flag = true;
btn.addEventListener("click", function () {
//判断节流阀的值为true，执行代码
if (flag) {
//满足条件后将节流阀改为false
flag = false
console.log("我是节流效果");
//创建一个定时器，1s后将节流阀打开
setTimeout(function () {
flag = true
}, 1000)
}
})
//可以发现效果，无论点的多快，这个按钮的点击输出，一直是匀速执行的，不受点击次数先找，每次点击完都要等下一次执行完才执行下一次点击的代码，总的来说就是点击速度越快，就能发现是匀速效果
防抖代码
// 防抖
// 定义全局变量定时器,赋值为空
let temer = null;
btn.addEventListener("click", function () {
//每次点击都清除上一次定时器
clearTimeout(temer)
//创建一个定时器，赋上全局变量
temer = setTimeout(function () {
console.log("我是防抖效果");
}, 1000)
})
// 运行完可以发现，传统的点击一次运行一次，在防抖里面，无论你在1秒内点的多块，它只在你点击超过1s的才执行，这样每次运行清除一下定时器就起到了防抖的效果，
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
#__bs_notify__ {
display: none !important;
}
/*上面的选择器不要删,否则内置预览会有个黑色的块,在下方写页面其他选择器*/
</style>
</head>
<body>
<button>点击按钮看控制台</button>
<script>
let btn = document.querySelector("button")
// 防抖
// 定义全局变量定时器,赋值为空
let temer = null;
btn.addEventListener("click", function () {
//每次点击都清除上一次定时器
clearTimeout(temer)
//创建一个定时器，赋上全局变量
temer = setTimeout(function () {
console.log("我是防抖效果");
}, 1000)
})
// 运行完可以发现，传统的点击一次运行一次，在防抖里面，无论你在1秒内点的多块，它只在你点击超过1s的才执行，这样每次运行清除一下定时器就起到了防抖的效果，
//节流
//定义一个节流阀，取值：true或false
let flag = true;
btn.addEventListener("click", function () {
//判断节流阀的值为true，执行代码
if (flag) {
//满足条件后将节流阀改为false
flag = false
console.log("我是节流效果");
//创建一个定时器，1s后将节流阀打开
setTimeout(function () {
flag = true
}, 1000)
}
})
//可以发现效果，无论点的多快，这个按钮的点击输出，一直是匀速执行的，不受点击次数先找，每次点击完都要等下一次执行完才执行下一次点击的代码，总的来说就是点击速度越快，就能发现是匀速效果
</script>
</body>
</html>
