用LeetCode寫日記-Day18

怎麼辦…我連題目都看不懂…比昨天還慘…..
只好看解答了。

Day18: Debounce

問題描述：

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.

!https://assets.leetcode.com/uploads/2023/04/08/screen-shot-2023-04-08-at-11048-pm.png

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.

問題難度：Medium

問題限制：

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

我的解題過程：

打開解答時剛好看到第一篇在解釋什麼是debounce
先來了解一下這個吧：

Why to use Debouncing?

Have you ever encountered a situation where a function gets called multiple times within a short amount of time, leading to performance issues or unexpected behavior? This is a common problem in JavaScript, especially when working with events like scrolling, resizing, or typing.

Fortunately, there’s a simple technique called “debouncing” that can help you control the frequency of function calls and avoid these issues.

What is Debouncing?

Debouncing is a method that limits the rate at which a function gets called. It works by delaying the execution of a function until a certain amount of time has passed without any additional function calls. If another function call happens within this time frame, the timer resets and the function execution is delayed again.

• Debouncing is useful in situations where you want to prevent a function from being called too frequently, such as:
• Handling user input events like keypresses, mouse movements, or button clicks
• Handling expensive computations or network requests that don’t need to be performed on every function call

根據Chat GPT的翻譯：

為什麼使用防彈跳？

在 JavaScript 中，當一個函數在短時間內被多次呼叫時，可能會導致性能問題或意外的行為。這種情況常發生在處理事件（如滾動、調整大小或鍵入）時。為了避免這些問題，可以使用防彈跳技術來控制函數呼叫的頻率。

什麼是防彈跳？

防彈跳是一種限制函數被呼叫頻率的方法。它通過延遲執行一個函數，直到過了一定的時間，期間沒有其他的函數呼叫。如果在這段時間內有其他函數呼叫，計時器就會重置，並且函數的執行再次被延遲。

靠，這不就是我們在很多地方都會使用的技巧嗎？

之前有運用在input的輸入還有做google map 相關的side-project有使用到

這樣我就知道題目要幹嘛了。

我們先宣告一個變數time ，先不賦值(後來看有些解答會給null)，這個變數是要來放置計時器。

然後就是重點了，我們回傳的function 第一件事就是要清除這個計時器。

這樣計時器才會從新計時，以達到我們的需求，說白話點這個要求就是就是：

等我沒打字後1秒再把我所輸入的內容console出來

我的code：

var debounce = function(fn, t) {
    let timer;
    return function(...args) {
        clearTimeout(timer);
        timer = setTimeout(() => fn(...args), t);
    }
};

其他解法：

var debounce = function(fn, t) {
    let timeoutId; // To keep track of the timeout ID

    return function(...args) {
        clearTimeout(timeoutId); // Clear any pending timeouts

        timeoutId = setTimeout(() => {
            fn.apply(this, args); // Execute the function after the specified delay
        }, t);
    };
};

總結:

這題最大的難點就是我英文看不懂、專有名詞不認識，導致就算按翻譯還是搞不清楚他要幹嘛><”