防反射JavaScript –如何让您的JS等待

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.

祝大家编程愉快。