Replies: 2 comments
-
Maybe it has to do with the way Vue implements watch? |
Beta Was this translation helpful? Give feedback.
-
Ok, if anyone else finds this, I have a sort of answer:
The debounce should fire only if the timeout has passed and current value is not equal to the previous value:
The debounce should fire only if the timeout has passed and the current value is not in the N last values:
Wonder why it matters? Assume you have a search field to look people up in a phone book via api on a different server. The user types S-m-i and the debounce fires, returning everyone whose first or last name starts with Smi. In the US, that could be thousands since Smith is the most common last name last time I checked. The user then typs an 'h' and quickly backspaces, then the debounce fires again. The app should not make a second api call just to get back thousands of results it already has, nor should it try to parse thousands of results and update the dom with the exact same data. In this case use watchDebounced(). If you are searching a small database, like US zipcodes, that resides on the same server as the webapp, you may not care if it makes a duplicate query. There are only 42,000 zipcodes and you are probably only doing a search if the user has entered at least 2 numbers, so the results are quick and small. So you might use refDebounced(). Or maybe you are caching the results in local storage, so you want to check the history and if the api already made the call you pull from cache, but if the search value isn't in the history, then you make the api call. Yes, I know, why not just look to see if there's anything in searchResults[searchterm], but you try coming up with examples. In this case you might use useDebouncedRefHistory(). My test code if any reader is curious:
|
Beta Was this translation helpful? Give feedback.
-
Hi,
Reading through the docs at https://vueuse.org/shared/refDebounced/, I don't see anything about refDebounced comparing the current value to the previous value. In practice, it looks like refDebounced only fires if the current value is different than the previous value. That's a nice default, but I don't want to rely on it since I didn't see anything about it in the docs.
To duplicate, in the demo I type 'asdf' and 1 second later the api fires. Then I hit backspace to blank out the field, quickly type '123', hit backspace to blank the field, then type 'asdf' and wait a few seconds. I would expect the api to fire again 1 second after the last keyup event, but it never fires. At 1 second you have to be kind of quick, but I've tried it with longer intervals with the same result.
Most of the time this is exactly the behavior I would want and expect, but there might be a reason that I don't care. And I'm drawing a blank on a good, real world example right now.
I haven't been able to check on the other debounce functions or the throttled ones, but they might have the same issue.
Am I just missing something? That's usually the case. Thanks!
Beta Was this translation helpful? Give feedback.
All reactions