后端开发教程 - Java、Spring Boot 实战 - msg200.com
去抖动与节流
去抖动
节流
让我们考虑一个例子，我们正在尝试构建一个具有自动完成功能的搜索栏。现在，它通过 API 获取建议的数据。因此，它必须通过互联网进行 API 调用。现在，自动完成功能可以处理用户输入的每个字符。但是，如果每次用户输入内容时都要调用我们的 API，这会对我们的 Web 应用造成负担，并且由于我们必须处理如此多的网络调用，性能会降低。
可以利用去抖动和节流来提高我们的性能。
去抖动
去抖动是一种技术，用于确保耗时任务不会被频繁调用，以免对网页性能产生负面影响。换句话说，它限制了函数的调用频率。
如果我们实现了去抖动功能，那么只有当用户连续两次按键之间有一段停顿时，我们才会触发 API 调用。换句话说，如果用户在再次输入之前停顿了一段时间，我们就会在这个间隙触发 API 调用。这里我们设置了一个合理的时间限制，比如 500 毫秒或 1 秒。
我们可以利用 setTimeout 来实现去抖动：
const getData = () => {
console.log(“Assume this is the API call”);
}
const debouncing = function(fn,d) {
Let timer;
return function(){
let context = this;
args = arguments;
clearTimeout(timer);
timer = setTimeout(() => {
fn.apply(context,arguments);
}, d);
}
}
debouncing(getData, 300);
节流
节流是一种技术，无论用户触发事件多少次，附加函数在给定的时间间隔内只会执行一次。换句话说，我们只在用户第一次输入时触发事件。
因此，去抖动更适合于执行关键操作（如支付账单或甚至调整窗口大小等）的按钮点击。
如果我们在上面的例子中使用节流，我们可以以这样一种方式模拟它，即在用户输入所有内容后触发 api。
我们可以这样实现节流：
function throttleFunction(func, delay) {
return function (args) {
let previousCall = this.lastCall;
this.lastCall = Date.now();
if (previousCall === undefined ||
(this.lastCall - previousCall) > delay) {
func(args);
}
}
}
const getData = () => {
console.log(“Assume this is the API call”);
}
throttleFunction(getData, 300);