web-dev-qa-db-ja.com

非同期関数でデバウンスを使用するにはどうすればよいですか？

debounce関数でasyncを使用するにはどうすればよいですか？ vue- app内に、回避したいAPIを継続的に呼び出すAPIからデータを受け取るメソッドがあります。

これが私の方法です：

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

以前にlodashをインストールしたことがありますが、どうすればそれを実現できますか？

javascriptvue.jsvuejs2debouncingdebounce
3
ST80

Lodashの debounce 関数は関数を受け取り、待機する時間を取り、関数を返します。

したがって、次のようにします。

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

特定の時間だけデバウンスしたい場合は、関数が非同期であってもlodashsメソッドが機能します。ただし、非同期呼び出しが成功するまでデバウンスする場合は、カスタムデバウンサーが必要になる可能性があります。

function debounceAsync(fn) {
  let block = false;
  return async function(...args) {
   if(block) return;
   block = true;
   await fn(...args);
   block = false;
  }
}
0
Jonas Wilms