前言
想要了解什么是防抖和节流?首先我们要先了解它们的应用场景。
以下是简单的应用场景:
防抖:登录、发短信等按钮避免用户点击太快,以致于发送了多次请求。
节流:input 框实时搜索并发送请求展示下拉列表,没隔一秒发送一次请求 (也可做防抖,经常会遇到的场景)
一、防抖(debounce)?
防抖,顾名思义,防止抖动,以免把一次事件误认为多次,敲键盘就是一个每天都会接触到的防抖操作。
代码如下(示例):
function debounce(func, time) {
let timeOut;
return function (args) {
// 箭头函数的this直接指向函数本身
// const context = this;
if (timeOut) clearTimeout(timeOut);
timeOut = setTimeout(() => {
func(args);
}, time);
};
}
二.节流(throttle)?
节流,顾名思义,控制水的流量。控制事件发生的频率,如控制为1s发生一次,甚至1分钟发生一次。与服务端(server)及网关(gateway)控制的限流 (Rate Limit) 类似。 代码如下(示例):function throttle(fn: any, wait: number, ref: any) {
let pre = Date.now();
let first = true;
return function () {
const context = this;
const args = arguments;
const now = Date.now();
if (now - pre >= wait || first === true) {
fn.apply(context, args);
pre = Date.now();
first = false;
} else {
message.info('请勿频繁操作');
}
};
}