一.背景
在日常开发中，我们会经常遇到搜索查询，用户在输入过程中会触发 input 值的改变而持续触发函数调用。或者在用户在商品搜索页滑动浏览商品时，如果我们监听了窗口滚动来发送埋点请求的话，就会频繁触发接口调用。但有时候我们并不希望用户的持续操作过程中，会频繁触发接口的调用。而为了限制这种短时间内高频触发函数调用情况发生，我们可以借助防抖和节流。
二.防抖
-
概念 : 防抖指的是-----> 频繁触发某个操作时 , 只执行最后一次。 防抖，顾名思义，防止抖动。用于将用户的操作行为触发转换为程序行为触发，防止用户操作的结果抖动。一段时间内，事件在我们规定的间隔 n 秒内多次执行，回调只会执行一次。
-
作用 : 减少逻辑执行的次数
-
场景 : 搜索框只在输入完后,才执行查询的请求。
-
好处 : 这样可以有效减少请求的次数 , 节省网络资源。
<!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>
</head>
<body>
<button>按钮</button>
<script>
// 防抖:频繁触发某个操作时,只执行最后一次
// 定时器的名称必须是全局变量,这样,进入事件里面,才能清除上一次的定时器
let timer
// 获取元素,绑定事件
document.querySelector('button').onclick = function(){
// 取消之前的延时器
clearTimeout(timer)
// 利用定时器触发
timer = setTimeout(function(){
console.log('发送ajax...')
},5000)
}
</script>
</body>
</html>
主要应用场景有：
a、scroll事件滚动触发，
b、搜索框输入查询
c、表单验证
d、按钮提交事件
e、浏览器窗口缩放，resize事件
f、淘宝搜索
g、search远程搜索框：防止用户不断输入过程中，不断请求资源，n秒内只发送1次，用防抖来节约资源
h、按钮提交场景，比如点赞，表单提交等，防止多次提交
i、监听resize触发时， 不断的调整浏览器窗口大小会不断触发resize，使用防抖可以让其只执行一次
三.节流
- 概念 : 节流指的是 ====> 单位时间内 , 频繁触发同一个操作 , 只会触发1次。节流，顾名思义，控制流量。用于用户在与页面交互时控制事件发生的频率，一般场景是单位的时间或其它间隔内定时执行操作。一段时间内，事件在每次到达我们规定的间隔 n 秒时触发一次。
- 作用 ： 减少逻辑执行的次数
- 场景 ： 页面新闻刷新 ， 浏览器大小改变页面适配。
- 好处 ： 这样可以有效减少请求的次数 ， 节省网络资源。
<!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>
</head>
<body>
<button>按钮</button>
<script>
// 节流指的是:单位时间内,频繁触发同一个操作,只会触发1次
// 思路:开关思想
let bol = true
// 获取元素,绑定事件
document.querySelector('button').onclick = function(){
// 在设置false之前,先判断,是否是第一次点击
if(bol == false){
return
}
console.log('发送ajax...')
// 只要有人点击就立刻改为false
bol = false
// 利用延时器实现节流
timer = setTimeout(function(){
// 延时器,ajax接收完成,之后把bol改为true
bol = true
},2000)
}
</script>
</body>
</html>
适用场景：
商品搜索列表、商品橱窗等，用户滑动时 定时 / 定滑动的高度 发送埋点请求
- 拖拽场景：固定时间内只执行一次， 防止高频率的的触发位置变动
- 监听滚动事件：实现触底加载更多功能
- 屏幕尺寸变化时， 页面内容随之变动，执行相应的逻辑
- 射击游戏中的mousedown、keydown时间
四.总结
借用防抖和节流的思想，来控制函数执行的时机，可以节约性能，避免页面卡顿等等等。。。以免带来不好的用户体验
