How to use debounce on async function?

Question

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?

Solution

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);
}

Comments

[ST80]

Thanks alot! Yet so simple though :-)

[Zia Ul Rehman Mughal]

Doesn't seem to be returning values properly when used with await

[user1843640]

Only works when the lodash debounce leading option is set to true.

[Chris A]

@user1843640 Sorry to hijack an old comment but is there a reason for it only working with leading : true? For me this causes unwanted behaviour, like if the user types 'search' in a search field then it will do the search only on 's'