在短时间内页面进行多次交互操作时，防抖和节流会有不同逻辑决定响应方法是否调用
什么是防抖（Debounce）？
防抖 （多次触发 只执行最后一次）
手搓代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
// 1.封装防抖函数
function debounce(fn, time) {
// 4.创建一个标记用来存放定时器的返回值
let timeout = null;
return function () {
// 5.每当用户触发input事件 把前一个 setTimeout 清楚掉
clearTimeout(timeout);
// 6.然后又创建一个新的 setTimeout, 这样就能保证输入字符后等待的间隔内 还有字符输入的话，就不会执行 setTimeout里面的内容
timeout = setTimeout(() => {
// 7.这里进行防抖的内容
fn();
}, time);
};
}
// 2.获取inpt元素
var inp = document.getElementById("inp");
// 8. 测试防抖临时使用的函数
function sayHi() {
console.log("防抖成功");
}
// 3.给inp绑定input事件 调用封装的防抖函数 传入要执行的内容与间隔事件
inp.addEventListener("input", debounce(sayHi, 5000));
|
什么是节流（Throttle）？
节流 （时间间隔内 只允许执行一次）
手搓代码：
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
|
// 1.封装节流函数
function throttle(fn, time) {
//3. 通过闭包保存一个 "节流阀" 默认为false
let temp = false;
return function () {
//8.触发事件被调用 判断"节流阀" 是否为true 如果为true就直接trurn出去不做任何操作
if (temp) {
return;
} else {
//4. 如果节流阀为false 立即将节流阀设置为true
temp = true; //节流阀设置为true
//5. 开启定时器
setTimeout(() => {
//6. 将外部传入的函数的执行放在setTimeout中
fn.apply(this, arguments);
//7. 最后在setTimeout执行完毕后再把标记'节流阀'为false(关键) 表示可以执行下一次循环了。当定时器没有执行的时候标记永远是true，在开头被return掉
temp = false;
}, time);
}
};
}
function sayHi(e) {
// 打印当前 document 的宽高
console.log(e.target.innerWidth, e.target.innerHeight);
}
// 2.绑定事件，绑定时就调用节流函数
// 敲黑板！！！ 这里是重点 绑定是就要调用一下封装的节流函数 触发事件是触发封装函数内部的函数
window.addEventListener("resize", throttle(sayHi, 2000));
|
高效方式实现防抖和节流
使用 Loadash 库实现防抖和节流
- lodash 是一个留下的 JavaScript 实用工具库，提供了高效的防抖和节流函数
使用步骤
- 安装 lodash
- 使用防抖和节流
1
2
3
4
5
6
7
8
9
10
|
import debounce from "lodash/debounce";
import throttle from "lodash/throttle";
// 防抖示例
const debouncedSearch = debounce(handleSearch, 300);
searchInput.addEventListener("input", debouncedSearch);
// 节流示例
const throttledScroll = throttle(handleScroll, 200);
window.addEventListener("scroll", throttledScroll);
|
- 设置合适的时间间隔
- 防抖和节流的核心在于事件频率控制，因此根据实际场景合理设置时间参数非常关键。过长的延迟可能导致响应不及时，而过短的间隔可能会影响性能提升效果。
通常，防抖的延迟在200ms到500ms之间，节流的时间间隔在100ms到300ms之间。
我写过的
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
import _ from 'lodash'
const loading=ref()
// 防抖搜索（核心逻辑）
const handleSearch = _.debounce(async (query) => {
if (!query) return
loading.value = true
try {
let res;
// 接口调用
res = await props.api({ name: query})
} finally {
loading.value = false
}
}, 300)
|