Debounce methods do not execute when invoked. Instead, they wait for a predetermined time before executing. If the same method is called again, the previous is cancelled and the timer restarts.
防抖動方法在調用時不執行。 而是，它們在執行之前等待預定的時間。 如果再次調用相同的方法，則前一個方法將被取消，計時器將重新啟動。
Here is a short video walk through in which I make a debounce method:
這是一段簡短的視頻，其中介紹了一種去抖動方法：
And here's the source code of the video tutorial:
這是視頻教程的源代碼：
Let's look at the code in more detail now.
讓我們現在更詳細地看一下代碼。
Assume you have a button called like this:
假設您有一個像這樣的按鈕：
<button id="myBtn">Click me</button>And in your JS file you have something like this:
在您的JS文件中，您將得到以下內容：
document.getElementById('myBtn').addEventListener('click', () => {console.log('clicked');
})Every time you click on your button, you would see a message in your console saying clicked.
每次單擊按鈕時，您的控制臺中都會顯示一條消息，提示您已clicked 。
Let's add a debounce method to our click event listener here:
讓我們在這里的click事件監聽器中添加一個反跳方法：
document.getElementById('myBtn').addEventListener('click', debouce(() => {console.log('click');
}, 2000))The debounce method here takes in two arguments, callback & wait. callback is the function you want to execute, while wait is the configurable time period delay after which you want your callback to be executed.
這里的debounce方法接受兩個參數， callback和wait 。 callback是要執行的功能，而wait是可配置的時間段延遲，在此延遲之后您要執行callback 。
Here our callback method simply is console.log('click'); and the wait is 2000 milliseconds.
在這里，我們的callback方法就是console.log('click'); wait是2000 milliseconds 。
So given this debounce method, which takes in two parameters callback & wait, let's define debounce:
因此，給定這個debounce方法，它接受兩個參數callback ＆ wait ，讓我們定義debounce ：
function debounce(callback, wait) {let timerId;return (...args) => {clearTimeout(timerId);timerId = setTimeout(() => {callback(...args);}, wait);};
}Function debounce takes in two parameters: the callback (which is the function we want to execute) and the wait period (after how much delay we want to execute our callback).
函數debounce有兩個參數：回調(這是我們要執行的函數)和wait時間(在wait了多少延遲后才要執行回調)。
Inside the function, we simply return a function, which is the following:
在函數內部，我們僅返回一個函數，如下所示：
let timerId;
return (...args) => {clearTimeout(timerId);timerId = setTimeout(() => {callback(...args);}, wait);
};What this function does is invoke our callback method after a certain period of time. And if during that period of time the same method is invoked again, the previous function is cancelled and the timer is reset and starts again.
該函數的作用是在一定時間后調用我們的callback方法。 如果在該時間段內再次調用相同的方法，則先前的功能將被取消，計時器將重置并重新啟動。
And that is it! All you need to know about what debounce is.
就是這樣！ 您需要了解什么是去抖動。
Here is another bonus video on closures, because I used a closure inside my debounce function.
這是另一個關于閉包的獎勵視頻，因為我在debounce功能中使用了closure 。
Let me know on twitter if you were able to find the use of closure inside the debounce method.
如果您能夠在debounce方法中找到閉包的用法，請在Twitter上告訴我。
Happy coding, everyone.
祝大家編程愉快。
翻譯自: https://www.freecodecamp.org/news/debounce-javascript-tutorial-how-to-make-your-js-wait-up/
