How to debounce a global validator?

[laferte-tech]

Hello,

i'm trying to debounce a global validator but with no success for the moment.

I tried different options but none work. For example, i tried this:

`defineRule('uniqueUsername', async (value) => {

const result = await new Promise((resolve) => {

  debounce(async () => {
    console.log('check username debounce:' + value)
    resolve(value !== "foo");
  }, 2000)()

});

console.log(result)
return result ? true : "This username is already taken";

})`

with this code, it's almost working except that there is a new debounce called for each value change.

i mean, if i type "a" and "aa" in less than 2 seconds, there are 2 differents calls to debounce (so it's not working).

I also tried something like:

defineRule('uniqueUsername, debounce((value) => { ...code here })

but in these case, result is always false whatever i return from the code inside debounce.

Do you have any hint about to make this work?

Thanks a lot

[logaretm]

A regular debounce won't work because you need to preserve the return value of the validation function. Most debounce functions in libraries like lodash and others are not built to handle this.

What you actually need is not a debounce function per se, but more of a "promise-batcher". as In you combine multiple calls to the async function into a single call within a timeframe which is kinda what you want here. And because promises are chainable and nestable, you could batch them using a function like this one.

Here is an example:

https://codesandbox.io/s/flamboyant-field-d2220?file=/src/main.js

[laferte-tech]

Hi, thanks a lot for your answer! it works well now : -) it's really advanced Javascript for me, but i least i understand the idea now.