如何在异步函数中使用防抖函数？

Question

我如何在async函数上使用debounce？ 我的vue-应用程序中有一个方法，该方法从API接收数据，并调用API以连续调用它，而我想避免这种情况。

以下是我的方法：

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

我之前安装了 lodash，那么我该如何实现它呢？

Translated:

我之前已经安装了 lodash，那么我应该怎样去实现它呢？

- ST80

Answer 1

Lodash的debounce函数接受一个函数和等待时间，并返回一个函数。

像这样做：

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

- Vamsi Krishna

---

使用await时似乎无法正确返回值。 - Zia Ul Rehman Mughal

当 lodash 的防抖函数中的 leading 选项被设置为 true 时才起作用。 - user1843640

抱歉打扰了一条旧评论，但只有在 "leading：true" 的情况下它才有效，这是有原因的吗？对我来说，这会导致不想要的行为，比如如果用户在搜索字段中键入“search”，那么它只会在“s”上执行搜索。 - Chris A

@ZiaUlRehmanMughal，你找到任何异步返回值的方法了吗？ - EaBengaluru

@ChrisA 因为 leading: true 立即调用了该方法，所以我们期望的 Promise 可用。不幸的是，lodash.debounce 在使用 leading: true 时无法正常工作。https://dev59.com/3a7la4cB1Zd3GeqPg6du - Saman Mohamadi