(no title)
2024.07.12
wlg
℃
JS
防抖和节流
防抖（debounce）和节流（throttle）是两种常用的优化高频触发事件的方法。
防抖：当持续触发事件时，一定时间段内没有再触发事件，函数才会执行一次，如果在这个时间段内又触发了事件，则会重新开始延时。常用于输入框搜索、滚动加载等场景。
节流：当持续触发事件时，保证一定时间段内只触发一次事件处理函数。常用于滚动监听、窗口大小改变等场景。
防抖：通俗来说就是我输入一个a后再规定时间内又输入一个a，第二输入触发的时候会删除上一次的定时器，所以只会执行第二次的aa
1
2
3
4
5
6
7
8
9
10
11
12
|
function debounce(func, wait) {
let timeout;
return function() {
const context = this;
const args = arguments;
clearTimeout(timeout);
timeout = setTimeout(function() {
func.apply(context, args);
}, wait);
};
}
|
**节流:**通俗来说就是我输入第一个a后，在a的定时器结束之前，后续所以的输入触发我全都不管
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
function throttle(func, wait) {
let timeout;
return function() {
const context = this;
const args = arguments;
if (!timeout) {
timeout = setTimeout(function() {
timeout = null;
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
| <style>
html{
height: 500vh;
}
</style>
<body>
</body>
<script src="./debounce.js"></script>
<script src="./throttle.js"></script>
<script>
const debouncedSearch = debounce(function() {
console.log('防抖搜索');
}, 500);
window.addEventListener('scroll', debouncedSearch);
const throttledScroll = throttle(function() {
console.log('节流行为');
}, 500);
window.addEventListener('scroll', throttledScroll);
</script>
|
