debounce

248 bytes

since v12.1.0

使用方法

debounce 函数帮助有效管理频繁的函数调用。它需要两个输入：delay 时间（以毫秒为单位）和回调函数。当您使用 debounce 返回的函数（即”防抖函数”）时，它不会立即运行您的回调。相反，它会等待指定的 delay。

如果在此等待期间再次调用，它会重置计时器。您的源函数只有在完整的 delay 时间内没有中断时才运行。这对于处理快速事件（如击键）很有用，确保您的代码仅在活动暂停后响应。

import * as _ from "radashi";

const processData = (data: string) => {
  console.log(`Processing data: "${data}"...`);
};
const debouncedProcessData = _.debounce({ delay: 100 }, processData);

debouncedProcessData("data1"); // 永远不会记录
debouncedProcessData("data2"); // 永远不会记录
debouncedProcessData("data3"); // Processing data: "data3"...

setTimeout(() => {
  debouncedProcessData("data4"); // Processing data: "data4"... (200ms后)
}, 200);

选项

leading

当 leading 选项为 true 时，您的回调在防抖函数第一次被调用时立即调用。之后，防抖函数的工作方式就像 leading 为 false。

const myDebouncedFunc = _.debounce({ delay: 100, leading: true }, (x) => {
  console.log(x);
});

myDebouncedFunc(0); // 立即记录"0"
myDebouncedFunc(1); // 永远不会记录
myDebouncedFunc(2); // 约100ms后记录"2"

方法

cancel

防抖函数的 cancel 方法做两件事：

1. 它取消防抖函数的任何待处理调用。
2. 它永久禁用防抖行为。防抖函数的所有未来调用都将立即调用您的回调。

const myDebouncedFunc = _.debounce({ delay: 100 }, (x) => {
  console.log(x);
});

myDebouncedFunc(0); // 永远不会记录
myDebouncedFunc(1); // 永远不会记录
myDebouncedFunc.cancel();
myDebouncedFunc(2); // 立即记录"2"

flush

flush 方法将立即调用您的回调，无论防抖函数当前是否处于待处理状态。

const myDebouncedFunc = _.debounce({ delay: 100 }, (x) => {
  console.log(x);
});

myDebouncedFunc(0); // 约100ms后记录"0"
myDebouncedFunc.flush(1); // 立即记录"1"

isPending

isPending 方法在防抖函数有任何待处理调用时返回 true。

const myDebouncedFunc = _.debounce({ delay: 100 }, (x) => {
  console.log(x);
});

myDebouncedFunc(0); // 约100ms后记录"0"
myDebouncedFunc.isPending(); // => true
setTimeout(() => {
  myDebouncedFunc.isPending(); // => false
}, 100);