区别
-
防抖是n秒后执行一次 -
节流是n秒内执行一次
案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>防抖/节流</title>
</head>
<body>
<div id="box">
防抖:<input type="text" placeholder="请输入内容" />
节流:<button>点击查看控制台</button>
</div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
// 防抖 // 防抖是n秒后执行一次
// (1)
let timer = null
$('input').on('input',function(){
console.log('没有防抖',$('input').val())
// 向清除一次定时器
clearTimeout(timer)
// 重新开启一个定时器
timer = setTimeout(() => {
// 如果input输入框的值为空，就终止执行后面的代码
if(!$('input').val()) return
console.log('加了防抖后',$(this).val())
}, 1000);
})
//(2)
// var btn = document.querySelector('button')
// var timer = null
// btn.onclick = function () {
// // 每次执行把上一次定时器清除，第一次执行也会清除timer
// clearTimeout(timer)
// // 延时 3s 执行
// timer = setTimeout(() => {
// console.log('3s后执行')
// }, 3000)
// }
// 节流 // 节流是n秒内执行一次
// var btn = document.querySelector('button')
// // 节流阀 定义了一个开关
// var flag = true
// btn.onclick = function () {
// // 如果节流阀是开启的，才会执行操作
// if (flag) {
// // 一旦执行 关闭节流阀
// flag = false
// console.log('5s后执行')
// // 模拟请求
// setTimeout(() => {
// // 请求成功后，在开启节流阀
// flag = true
// }, 5000)
// }
// }
</script>
</html>
总结
对于有停顿的高频触发事件建议选择防抖，然而对于高频触发并且连续的事件，选择节流。
最后
感觉文章好的话记得点个心心和关注和收藏，有错的地方麻烦指正一下，如果需要转载,请标明出处，多谢！！！