2627. 函数防抖

🟠   🔗 力扣 LeetCode

题目

Given a function fn and a time in milliseconds t, return a debounced version of that function.

A debounced function is a function whose execution is delayed by t milliseconds and whose execution is cancelled if it is called again within that window of time. The debounced function should also receive the passed parameters.

For example, let's say t = 50ms, and the function was called at 30ms, 60ms, and 100ms.

The first 2 function calls would be cancelled, and the 3rd function call would be executed at 150ms.

If instead t = 35ms, The 1st call would be cancelled, the 2nd would be executed at 95ms, and the 3rd would be executed at 135ms.


The above diagram shows how debounce will transform events. Each rectangle represents 100ms and the debounce time is 400ms. Each color represents a different set of inputs.

Please solve it without using lodash's _.debounce() function.

Example 1:

Input:

t = 50

calls = [

{"t": 50, inputs: [1]},

]

Output: [{"t": 125, inputs: [2]}]

Explanation:

let start = Date.now();

function log(...inputs) {

console.log([Date.now() - start, inputs ])

}

const dlog = debounce(log, 50);

setTimeout(() => dlog(1), 50);

setTimeout(() => dlog(2), 75);

The 1st call is cancelled by the 2nd call because the 2nd call occurred before 100ms

The 2nd call is delayed by 50ms and executed at 125ms. The inputs were (2).

Example 2:

Input:

t = 20

calls = [

{"t": 50, inputs: [1]},

]

Output: [{"t": 70, inputs: [1]}, {"t": 120, inputs: [2]}]

Explanation:

The 1st call is delayed until 70ms. The inputs were (1).

The 2nd call is delayed until 120ms. The inputs were (2).

Example 3:

Input:

t = 150

calls = [

{"t": 50, inputs: [1, 2]},

{"t": 300, inputs: [3, 4]},

]

Output: [{"t": 200, inputs: [1,2]}, {"t": 450, inputs: [5, 6]}]

Explanation:

The 1st call is delayed by 150ms and ran at 200ms. The inputs were (1, 2).

The 2nd call is cancelled by the 3rd call

The 3rd call is delayed by 150ms and ran at 450ms. The inputs were (5, 6).

Constraints:

• 0 <= t <= 1000
• 1 <= calls.length <= 10
• 0 <= calls[i].t <= 1000
• 0 <= calls[i].inputs.length <= 10

题目大意

请你编写一个函数，接收参数为另一个函数和一个以毫秒为单位的时间 t ，并返回该函数的 函数防抖 后的结果。

函数防抖 方法是一个函数，它的执行被延迟了 t 毫秒，如果在这个时间窗口内再次调用它，它的执行将被取消。你编写的防抖函数也应该接收传递的参数。

例如，假设 t = 50ms ，函数分别在 30ms 、 60ms 和 100ms 时调用。前两个函数调用将被取消，第三个函数调用将在 150ms 执行。如果改为 t = 35ms ，则第一个调用将被取消，第二个调用将在 95ms 执行，第三个调用将在 135ms 执行。


上图展示了防抖函数是如何转换事件的。其中，每个矩形表示 100ms，反弹时间为 400ms。每种颜色代表一组不同的输入。

请在不使用 lodash 的 _.debounce() 函数的前提下解决该问题。

提示：

• 0 <= t <= 1000
• 1 <= calls.length <= 10
• 0 <= calls[i].t <= 1000
• 0 <= calls[i].inputs.length <= 10

解题思路

防抖 的作用是将短时间内触发的多次调用，延迟到指定时间后执行。如果在等待时间内函数被再次调用，则重新计时，只有在没有新调用的情况下，等到计时器到达 t 毫秒后，才会真正执行 fn。这在处理高频触发事件（如窗口调整大小、用户输入等）时非常有用，可以避免大量不必要的操作。

1. 定义一个变量 timer 来存储当前的计时器 ID。
2. 返回一个新的函数，当函数被调用时，清除之前的计时器并重新启动一个新的定时器。
3. 如果计时器触发，则调用原始函数 fn，并传入其参数。

复杂度分析

• 时间复杂度：O(1)，因为清除和设置定时器都是常数时间操作。
• 空间复杂度：O(1)，只需要一个变量 timer 来存储计时器 ID。

代码

/**
 * @param {Function} fn
 * @param {number} t milliseconds
 * @return {Function}
 */
var debounce = function (fn, t) {
	let timer;
	return function (...args) {
		// 每次调用时，清除之前的计时器
		clearTimeout(timer);

		// 启动新的定时器
		timer = setTimeout(() => fn(...args), t);
	};
};

/**
 * const log = debounce(console.log, 100);
 * log('Hello'); // cancelled
 * log('Hello'); // cancelled
 * log('Hello'); // Logged at t=100ms
 */

相关题目

题号	标题	题解	标签	难度
2622	有时间限制的缓存	[✓]
2637	有时间限制的 Promise 对象	[✓]
2676	节流 🔒	[✓]