# 防抖与节流
本质上是优化高频率执行代码的一种手段,限制函数的执行次数。
如:浏览器的 resize
浏览器窗口、scroll
页面滚动、keypress
键盘、mousemove
鼠标移动 等事件在触发时,会不断地调用绑定在事件上的回调函数,极大地浪费资源,降低前端性能。
为了优化体验,需要对这类事件进行调用次数的限制,对此我们就可以采用 防抖(debounce) 和 节流(throttle) 的方式来减少调用频率。
定义:
- 节流: n 秒内只运行一次,若在 n 秒内重复触发,只有一次生效
- 防抖: n 秒后在执行该事件,若在 n 秒内被重复触发,则重新计时
# 1. 代码实现
HTML事件绑定的this值:
<button onclick="console.log(this)">click</button>// 这里的 this 是button元素
<button onclick="say()">click</button>
function say() {
console.log(this)// 这里的 this 是window 在按钮点击后 window调用say函数
}
// html 事件绑定的函数在执行时,有权访问全局作用域中的任何代码。也即我们可以在 html 中可以直接调用 script 标签中定义的函数。
--------
<button onclick="obj.say()">click</button>
let obj = {
say: function() {
console.log(this)// 这里的 this 是obj
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# 2.1 节流
完成节流可以使用时间戳与定时器的写法
使用时间戳写法,事件会立即执行,停止触发后没有办法再次执行
<script>
function coloring() {
let r = Math.floor(Math.random() * 255);
let g = Math.floor(Math.random() * 255);
let b = Math.floor(Math.random() * 255);
document.body.style.background = `rgb(${r},${g},${b})`;
}
function throttled(fn, delay) {
//this 是Window
let pre = 0;
return function () {
//this 是 button
let now = Date.now();
let context = this;
let args = arguments;
if (now - pre >= delay) {
//立即执行
fn.apply(this, args);
pre = now;
}
};
}
window.addEventListener('resize',throttled(coloring,2000))
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
使用定时器写法,delay
毫秒后第一次执行,第二次事件停止触发后依然会再一次执行。
setTimeout()
是属于 window
的方法,该方法用于在指定的毫秒数后调用函数或计算表达式。返回一个 ID(数字)
,可以将这个ID
传递给clearTimeout()
来取消执行。
<script>
function coloring() {
let r = Math.floor(Math.random() * 255);
let g = Math.floor(Math.random() * 255);
let b = Math.floor(Math.random() * 255);
document.body.style.background = `rgb(${r},${g},${b})`;
}
function throttled(fn, delay) {
let timer;
return function () {
let context = this;
let args = arguments;
if (!timer) {
timer = setTimeout(function () {
fn.apply(context, args);
timer = null;
}, delay);
}
};
}
window.addEventListener("resize", throttled(coloring, 2000));
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
# 2.2 防抖
简单版本的实现
function debounce(func, wait) {
let timeout;
//console.log(this); //this是window
return function () {
let context = this; // 最后由绑定事件的对象调用,所以this是绑定事件的对象
let args = arguments;
//重新计时 清除定时器
if (timeout) {
clearTimeout(timeout);
}
timeout = setTimeout(function () {
func.apply(context, args);
}, wait);
};
}
const button = document.querySelector("button");
button.addEventListener("click", debounce(say, 2000));
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
防抖如果需要立即执行,可加入第三个参数用于判断,实现如下:
function debounce(func, wait, immediate) {
let timeout;
return function () {
let context = this;
let args = arguments;
if (timeout) clearTimeout(timeout); // timeout 不为null
if (immediate) {
let callNow = !timeout; // 第一次会立即执行,以后只有事件执行后才会再次触发
timeout = setTimeout(function () {
timeout = null;
}, wait)
if (callNow) {
func.apply(context, args)
}
}
//对第一次立即执行
else {
timeout = setTimeout(function () {
func.apply(context, args)
}, wait);
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
# 2. 区别
相同点:
- 都可以通过使用
setTimeout
实现 - 目的都是,降低回调执行频率。节省计算资源
不同点:
- 函数防抖,在一段连续操作结束后,处理回调,利用
clearTimeout
和setTimeout
实现。函数节流,在一段连续操作中,每一段时间只执行一次,频率较高的事件中使用来提高性能 - 函数防抖关注一定时间连续触发的事件,只在最后执行一次,而函数节流一段时间内只执行一次
例如,都设置时间频率为500ms,在2秒时间内,频繁触发函数,节流,每隔 500ms 就执行一次。防抖,则不管调动多少次方法,在2s后,只会执行一次
# 3. 应用场景
防抖在连续的事件,只需触发一次回调的场景有:
- 搜索框搜索输入。只需用户最后一次输入完,再发送请求
- 手机号、邮箱验证输入检测
- 窗口大小
resize
。只需窗口调整完成后,计算窗口大小。防止重复渲染。
节流在间隔一段时间执行一次回调的场景有:
- 滚动加载,加载更多或滚到底部监听
- 搜索框,搜索联想功能