防抖(debounce)和节流(throttle)

防抖(debounce):任务频繁触发情况下,只有任务触发的间隔超过指定间隔的时候,任务才会执行。

节流(throttle):指定时间间隔内只会执行一次任务。
 防抖与节流的原理:使用setTimeout来存放将要执行的函数。其中函数节流就是利用标记符来控制本次执行完毕。函数防抖就是利用clearTimeout来清楚执行的函数。目的为了节约计算机资源,从而达到一个更好的运行效果。

一、防抖

 用户在输入框内容校验等操作时,如果事件处理函数的调用频率无限制,会加重浏览器的负担,导致用户体验会很不好,防抖和节流的方式减少调用频率,同时又不影响实际效果。

下面是一个防抖的小案例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<button id="debounce">点我防抖</button>
<script>
window.onload = function () {
//获取按钮并绑定事件
var myDebounce = document.getElementById("debounce");
myDebounce.addEventListener("click",debounce(sayDebounce));
};
//防抖功能函数,接受传参
function debounce(fn){
//创建一个标记用来存放定时器的返回值
let timeout = null;
return function(){
//每次当用户点击、输入的时候,把前一个定时器消除
clearTimeout(timeout);
//创建一个新的setTimeout,这样能保证点击按钮后的间隔内,
//如果用户还点击的话,就不会执行fn函数
timeout = setTimeout(() => {
fn.call(this,arguments);
},1000);
};
};
//防抖事件的处理
function sayDebounce(){
// ...有些需要防抖的工作,在这里进行
console.log("防抖成功~");
}
</script>

在触发点击事件后,如果用户再次点击了,我们会清空之前的定时器,重新生成一个定时器。意思就是:这件事儿需要等待,如果你反复催促,就重新计时。
 总结一下就是:第一次触发事件,一段时间内没有再次触发事件,事件处理函数才会执行一次,如果设定的时间到来之前,再一次触发了事件,就会重新开始延时。

二、节流

 节流:指定时间间隔内只会执行一次任务。
节流的应用:
1、懒加载监听滚动条的位置,使用节流按照一定的频率进行获取。
2、点击提交按钮,只允许一定时间内点击一次。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<button id="throttle">点我防抖</button>
<script>
window.onload = function () {
//获取按钮并绑定事件
var myThrottle = document.getElementById("throttle");
myThrottle.addEventListener("click",throttle(sayThrottle));
};
//节流函数
function throttle(fn){
//通过闭包保存一个标记
let canRun = true;
return function(){
//在函数开头判断标志是否为true,不为true则中断函数
if(!canRun){
return;
}
//将canRun设置为false,防止执行之前再被执行
canRun = false;
//定时器
setTimeout(() => {
fn.call(this,arguments);
//执行完事件(例如调用完接口)之后,重新将这个标志设置为true
canRun = true;
},1000);
};
};
//需要节流的事件
function sayThrottle(){
// ...有些需要防抖的工作,在这里进行
console.log("节流成功~");
}
</script>
文章目录
  1. 1. 一、防抖
  2. 2. 二、节流
本站访客数人次