如何去抖动/限制这个对象的 prop 方法？

Question

我正在使用此 javascript 代码来实现

@tanstack/query

IndexedDB 持久性 如此处所述。

我有太多

put()

来电，我想限制/消除它们。

如何在下面的代码中做到这一点？

function createIDBPersister(store: UseStore): Persister {
  return {
    async persistClient(client: PersistedClient) {
      // this is called a lot of times!
      console.log('persistClient()');
      
      set("custom-db", client, store);
    },
    async restoreClient() {
      return await get<PersistedClient>("custom-db", store);
    },
    async removeClient() {
      await del("custom-db", store);
    }
  };
}

我尝试过：

function createIDBPersister(store: UseStore): Persister {
  return {
    async persistClient(client: PersistedClient) {
      
      debounce(() => { // import { debounce } from 'lodash-es';
        console.log('persistClient() inside debounce');
        
        set("custom-db", client, store);
      }, 1000)()

    },
    // ...rest
  };
}

但是这会写入与第一个消息相同数量的

console.log()

消息，只是晚了一秒。

Answer 1

我不了解 tanstack，但看起来它

persistClient()

被调用了太多次，所以你不能在你想要反跳的函数内进行反跳。您必须对

persistClient()

的调用站点进行反跳。

因此，无论调用该函数，您都可以执行以下操作：

function debounce(func, timeout = 200){
  let timer;

  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => { func.apply(this, args); }, timeout);
  };
}

const debouncedPersistClient = debounce(() => persistClient());

然后使用

debouncedPersistClient()

而不是直接使用

persistClient()

。