最近因为疫情隔离居家办公，闲着没事也在回忆和整合学过的知识，这里给大家分享几个有关“防抖”和“节流”方法，希望对大家有所帮助
1 前言
在前端开发过程中，会遇到很多实时输入查询、滚动条触发等业务。而这些频发操作的事件，如果每次触发都进行执行的话，会造成性能下降、后台的压力变大，那么此时就需要使用防抖和节流进行处理。
防抖和节流，见名思义：防抖是防止抖动，节流是节约流量。
2 防抖
防抖（Debounce） 指的是触发事件后n秒后才能执行函数，如果在n秒内触发了事件，则会重新计算执行时间。
常见场景：点击按钮、拍照、下拉触底加载下一页等。
持续触发输入事件时，并不会立即执行func函数，而是在指定时间delay中没有再次触发事件时，才会进行延时执行func函数。
2.1 原始栗子（未进行防抖处理）
为了更加深入透彻地理解为什么要进行防抖处理，我们可以先体验不进行防抖的输入函数触发ajax实时请求的情况。
<div class="box">
没有进行防抖处理的：<input type="text" id="name" name="name">
</div>
<script>
// 模仿一段ajax请求
function ajax(value){
console.log("ajax request: " + value + ", time: " + new Date());
}
const inputBox = document.getElementById("name");
inputBox.addEventListener("keyup",e=>{
ajax(e.target.value);
})
</script>
复制代码
运行结果：
上面结果所示，只要我们在输入框中每次输入值、按下键盘，那么就会触发一次ajax请求，这对于用户和开发者而言都是不好的体验和资源的浪费。此时，我们想到每次用户输入文字都是需要一定时间的，那么我们可以定义在规定时间进行完整输入才能进行请求，这样我们可以减轻对后台的压力。
2.2 防抖栗子
前面，我们看到对于短时间内频繁点击或输入的事件触发，未使用防抖处理的事件对于用户体验并不是很好。因此我们可以使用防抖进行处理，如下：
<div class="box">
进行防抖处理的：<input type="text" id="name" name="name">
</div>
<script>
// 模仿一段ajax请求
function ajax(value){
console.log("ajax request: " + value + ", time: " + new Date());
}
// 防抖函数
function debounce(func,delay){
let timeout; //定时器
return function(arguments){
// 判断定时器是否存在，存在的话进行清除，重新进行定时器计数
if(timeout) clearTimeout(timeout);//清除之前的事件
timeout = setTimeout(()=>{
func.call(this,arguments);//执行事件
},delay);
}
}
const inputBox = document.getElementById("name");
// 使用防抖函数进行封装ajax
let debounceAjax = debounce(ajax,500);
inputBox.addEventListener("keyup",e=>{
debounceAjax(e.target.value);
})
</script>
复制代码
运行结果：
从上面的运行结果可以看出，在500ms内输入文字按下键盘都不会触发请求事件，而是在输入框的定时器500ms停止输入后发送请求。实现原理很简单，就是对于频繁输入的输入框请求事件添加定时器进行计数，在指定时间内进行频繁输入并不会进行ajax请求，而是在指定时间间隔内停止输入才会执行函数。当停止输入但在此定时器计数时间内，会重新进行触发请求事件
3 节流
节流（Throttle） 指的是连续触发事件但是在n秒中只执行一次函数。即不管你在指定时间内触发多少次函数，但是它只执行一次事件。（只有一次生效）
常见场景：即时查询
在持续进行触发输入事件时，并不会立即执行func的函数请求，而是每隔指定的delay时间后才会执行一次func函数，不管这段时间内你点击了多少次。
3.1 节流栗子
<div class="box">
进行节流处理的：<input type="text" id="name" name="name">
</div>
<script>
// 模仿一段ajax请求
function ajax(value){
console.log("ajax request: " + value + ", time: " + new Date());
}
// 节流--定时器版
function throttle(func,delay){
let timeout;//定义一个定时器标记
return function(arguments){
// 判断是否存在定时器
if(!timeout){
// 创建一个定时器
timeout = setTimeout(()=>{
// delay时间间隔清空定时器
clearTimeout(timeout);
func.call(this,arguments);
},delay)
}
}
}
const inputBox = document.getElementById("name");
// 使用节流函数进行封装ajax
let throttleAjax = throttle(ajax,500);
inputBox.addEventListener("keyup",e=>{
throttleAjax(e.target.value);
})
</script>
复制代码
运行结果：
从上面可以看到，无论我们在输入框输入多少文字，在指定时间内只执行一次函数
4 小结
- 函数防抖和函数节流都是防止某一时间内频繁触发。
- 函数防抖是在指定时间只执行一次，而函数节流是每到指定间隔时间执行一次。
- 函数防抖是将几次操作合并为一此操作进行，函数节流使得一定时间内只触发一次函数。
应用场景
- 防抖debounce
search搜索联想，用户在不断输入值时，用防抖来节约请求资源。
window触发resize的时候，不断的调整浏览器窗口大小会不断的触发这个事件，用防抖来让其只触发一次
- 节流throttle
鼠标不断点击触发，mousedown(单位时间内只触发一次)
监听滚动事件，比如是否滑到底部自动加载更多，用来判断。
如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。
标签：触发,防抖,定时器,节流,ajax,必会,函数 来源： https://www.cnblogs.com/smileZAZ/p/15936637.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。