How long should the debounce timeout be?

Question

When using the debounce() operator for form validation how long should the debounce timeout be? I currently have mine set to 400 milliseconds but idk if that is too short.

Answer 1

TL;DR

Get user feedback, get user feedback, get user feedback. 500ms is a good starting point.

---

Your answer will most likely vary depending on your application's purpose and platform it's being run on. In general, you want to provide the user feedback as soon as possible on whether they're doing something incorrect (an improperly formatted email address would be a good example). Additionally, the benefit from having quick feedback on form validation is that they know immediately which field is improperly filled out (as opposed to finishing the form and then being notified that some field somewhere is missing).

So with that being said, let's consider various use cases and platforms, and potential pitfalls of having your debounce being too short/long.

Problems with too short of a debounce

If you had a debounce that were to execute in under 200ms, to the average user, this will appear almost instantly. The result would be a user who is just starting to type in their email address, and them instantly being told it's in an incorrect format. Imagine back to when you were a kid, and your parent is mopping the floor, and before they're finished, you say, "Missed a spot!"... They're not going to take too kindly to that. Similar concept here.
Moral of the story, don't make your debounce too short. Give your user some time to fully fill out the field.

Problems with too long of a debounce

Now let's consider the other side of the time spectrum. Again, you're filling out the email field, and it's the last field on the form. You type away (but little to your knowledge, you typed incorrectly), finish the form, click submit, and wait a second as the form submits... Only to then be greeted by the "Incorrect field" error (womp womp).
This is a case of waiting too long. The user entered a field and their focus moved on. To have to drag the user back to a field will make them feel like they're not making progress (you want forms to have a sense of progress, to let the user know they're getting things completed).
Keeping with the household chores example, in this case, imagine you're told to clean your room and the bathroom. You finish your room, and are half way into the bathroom when your parent walks in and says you did a terrible job of cleaning your room (turns out you can't just throw everything under the bed). Now you have to go back to your room, only to then go back to cleaning the bathroom. Doesn't feel like progress is being made.

Balance

So, we have our two ends of the spectrum.
On one end, we have the jabber mouth "You're doing everything wrong" debounce.
And on the other end, we have the "Hey, come back here" debounce.
Both of those are not desirable. Rather, we want a debounce that acts as a guide. As we're doing our job of filling the form out, it tells us (after we've completed task) whether or not we did it correctly. We finish making the bed, and then our parent tells us that we've done a good/terrible job.
So conceptually, that's the problem we're trying to solve.

Answer

Keep in mind that people vary in they're typing speeds. Some people will probably be at the lower end of 20 words a minute, while others will be blazing fast at over 100. Additionally, if you're going to be working with mobile, people generally type slower on mobile than they would on a keyboard (I'd still be typing this up if I were on my phone...). All these things influence your debounce time.

If your debounce time needs to vary significantly due to different typing speeds, alternate approaches might be applicable (such as a 'onFieldLeave' kind of callback).

Without information on what kind of platform/audience you're addressing, a half second (500ms) debounce can be a helpful starting point. You want to give the user time to fill out a field, but capture their attention before they move on past it. 2 second (2000ms) might be too long depending on how fast people type, and 200ms would be an eye blink (both situations we've already covered).

Like @SteveD suggested in the comments, you really should have some user testing to find which debounce time works best for your application. Have a few different times, and get feedback. Nothing beats the cold hard answers you get from user feedback.

Here's a quick article to give you an idea of human reaction times, might prove insightful. https://www.nngroup.com/articles/powers-of-10-time-scales-in-ux/

Update 1

There's a useful site documenting some basic UX laws (https://lawsofux.com). Check out the one on something called the Doherty Threshold, it might prove useful for gauging interaction time.