How to use debounce on async function? [duplicate]

Question

This question already has answers here:

Write async function with Lodash in a Vuejs component (2 answers)

Closed 2 years ago.

How can I use debounce on an async function? I have a method within my vue-app which reveives data from an API which calls the API continuosly which I want to avoid.

Here is my method:

methods: {
    async getAlbums () {
     const response = await AlbumService.fetchAlbums()
     this.albums = response.data.albums
    } 
}

I've installed lodash previously so how can I achieve that?

Answer 1

Lodash's debounce function takes in a function , time to wait and returns a function.

So do it like this:

methods: {
  getAlbums: _.debounce(async function() {
    const response = await AlbumService.fetchAlbums();
    this.albums = response.data.albums;
  }, 1000);
}