customref 实现 防抖

406 阅读1分钟

customref: 创建一个自定义的 ref,并对其依赖跟踪和更新数据,触发显示的控制

可以用customref 实现 debounce 防抖的功能

function useDeboundRef<T>(value:T,delay = 200){
  let timeout:number
  return customRef((track,trigger)=>{
    return {
      get(){
        track()
        return value
      },
      set(newValue:T){
          if(timeout){clearTimeout(timeout)}
          timeout = setTimeout(()=>{
            trigger()
            value = newValue
          },delay)
      }
    }
  })
}