Skip to content

节流

用法

可以通过 throttle 参数来控制 useFetch 是否防抖

ts
const { execute } = useFetch(url, { immediate: false, throttle: 100 });

setTimeout(() => execute(), 30); // 生效
setTimeout(() => execute(), 30);
setTimeout(() => execute(), 30);
setTimeout(() => execute(), 30); // 生效
setTimeout(() => execute(), 30);

提示

  • throttle的条件对响应式更新refetch、自动更新refresh、手动执行execute都生效

  • 设置throttleexecute执行后不再返回 Promise, 可以通过promise$.then来进行后续动作

高阶用法

也可以通过 throttle的 await 和 options 参数来控制 useFetch 是否防抖, 用法和效果与 lodash.throttle 相同

ts
const { execute } = useFetch(url, {
  immediate: false,
  throttle: { wait: 100, options: { leading: false, trailing: true } },
});

setTimeout(() => execute(), 30);
setTimeout(() => execute(), 30); // 生效
setTimeout(() => execute(), 30);
setTimeout(() => execute(), 30);
setTimeout(() => execute(), 30); // 生效