在 Redux Saga 中去抖动

Question

我发现这个有用的小功能可以根据在 Redux Saga 中保存的键进行节流

export default function* throttlePerKey(pattern:string, selector: Function, timeout:number, saga:any) {
    const set = new Set()
  
    while(true) {
      const action = yield take(pattern)
      const id = selector(action)
      const throttled = set.has(id)
     
      if (throttled) {
         
      } else {
        set.add(id)
        // Expire items after timeout
        yield fork(function* () {
          yield delay(timeout)
          set.delete(id)
        })
        yield call(saga, action)
      }
    }
  }

我现在正在尝试让它去抖动。所以你总是得到最后一个。

任何线索如何做到这一点？

Answer 1

当操作第一次发生时，您可以派生一个设置延迟的任务，然后调用 saga，并保存任务对象。如果此操作很快发生第二次，您将取消任务并开始另一个任务。一旦经过足够长的时间而没有任何操作，最后一个任务将超过其延迟，并调用 saga。

export default function* debouncePerKey(pattern:string, selector: Function, timeout:number, saga:any) {
  const map = new Map()

  while(true) {
    const action = yield take(pattern)
    const id = selector(action)
    const existingTask = map.get(id)

    if (existingTask) {
      yield cancel(existingTask)
    }
   
    const newTask = yield fork(function* () {
      yield delay(timeout)
      map.delete(id)
      yield call(saga, action)
    })

    map.set(id, newTask)
  }
}

在 Redux Saga 中去抖动

Debounce in Redux Saga

javascript

debouncing

redux

redux-saga