Lodash's debounce and vue3

Question

I'm having an issue with debounce from lodash and vue3, could you help me find the issue in this code please?

Pinia's Store

actions: {
    fetchUsers(targetAppId?: string) {
      this.loading = true;
      AppsService.getUsers(targetAppId)
        .then(response => {
          this.users = response.data.users
          // This statement works without debounce
          debounce(() => { this.loading = false }, 1000)
        })
    },
  }

I think the issue is that debounce returns a function, which then needs calling, which you're not doing here. You could try something as simple as adding `()`, like `debounce(() => { this.loading = false }, 1000)()`. There's plenty of similar threads on SO eg https://stackoverflow.com/questions/43033621/lodash-debounce-not-working — sifriday, Jan 14 '23 at 16:52
https://stackoverflow.com/questions/24306290/lodash-debounce-not-working-in-anonymous-function and https://stackoverflow.com/questions/47809666/lodash-debounce-not-working-in-react are the same ... some dupe merging needed perhaps! — sifriday, Jan 14 '23 at 16:55
@sifriday but if I do like so, the statement is triggered automatically with not debouncing at all — Gonzalo Diaz Ailan, Jan 14 '23 at 17:18

score 1 · Accepted Answer · answered Jan 14 '23 at 18:15

this will never work the way u want it to.

it's like sifriday said, debounce returns a (new) function and you would need to re-call that function for a correct working debounce. but in your store you have an anonymous function, so there's no reference to actually debounce it.

you could add a loading state & then do a debounce on a commit which toggles this state OR wrap the action itself in a debounce.

Lodash's debounce and vue3

1 Answers1