vueuse filter 解析

createFilterWrapper

js 复制代码
/**
 * @internal
 */
export function createFilterWrapper<T extends AnyFn>(filter: EventFilter, fn: T) {
  function wrapper(this: any, ...args: ArgumentsType<T>) {
    return new Promise<Awaited<ReturnType<T>>>((resolve, reject) => {
      // make sure it's a promise
      Promise.resolve(filter(() => fn.apply(this, args), { fn, thisArg: this, args }))
        .then(resolve)
        .catch(reject);
    });
  }
  return wrapper;
}

createFilterWrapper 返回的函数wrapper就是被eventFilter处理过的函数,比如传入的fn希望被节流,当filterthrottleFilter,那么wrapper就是一个节流的函数。

// 创建一个节流函数(只创建一次)

js 复制代码
const throttledFn = useThrottleFn(() => {
  console.log('throttled function');
});

// 多次调用这个节流函数(每次调用会创建一个新Promise,但执行会受到节流控制)

js 复制代码
throttledFn();
throttledFn();
throttledFn();

也就是当执行 throttledFn()就会执行 filter(() => fn.apply(this, args), { fn, thisArg: this, args })

本质上这个filter 才是最终的「节流了的函数」,即 throttledFn <==> filter

和lodash一样节流/防抖,如何用createFilterWrapper实现呢?

const fn = _.debounce(fn, 200, { maxWait: 1000 }) ,使用createFilterWrapper 如下:

js 复制代码
fn = createFilterWrapper(
    debounceFilter(200, { maxWait: 1000 }),
    fn,
  );

throttleFilter

js 复制代码
// throttleFilter函数内返回的filter

const filter: EventFilter = (_invoke) => {
    const duration = toValue(ms);
    const elapsed = Date.now() - lastExec;
    const invoke = () => lastValue = _invoke();

    clear();

    if (duration <= 0) {
      lastExec = Date.now();
      return invoke();
    }

    if (elapsed > duration && (leading || !isLeading)) {
      lastExec = Date.now();
      invoke();
    } else if (trailing) {
      lastValue = new Promise((resolve, reject) => {
        lastRejector = rejectOnCancel ? reject : resolve;
        timer = setTimeout(() => {
          lastExec = Date.now();
          isLeading = true;
          resolve(invoke());
          clear();
        }, Math.max(0, duration - elapsed));
      });
    }

    if (!leading && !timer) timer = setTimeout(() => isLeading = true, duration);

    isLeading = false;
    return lastValue;
  };
相关推荐
岁月宁静3 小时前
# Node.js+Vue3.5 实战:豆包快速 / 深度思考模型的流式调用方案
vue.js·人工智能·node.js
记得坚持3 小时前
vue2插槽
前端·vue.js
带只拖鞋去流浪3 小时前
Vue.js响应式API
前端·javascript·vue.js
前端小灰狼3 小时前
Ant Design Vue Vue3 table 表头筛选重置不清空Bug
前端·javascript·vue.js·bug
Copper peas3 小时前
Vue 中的 v-model 指令详解
前端·javascript·vue.js
GHOME3 小时前
vue3中setup语法糖和setup函数的区别?
前端·vue.js·面试
前端_逍遥生4 小时前
Vue3 响应式数据最佳实践速查表
前端·vue.js
dreams_dream4 小时前
Vue树选择
javascript·vue.js·elementui
qwy7152292581634 小时前
Vue中的Provide/Inject如何实现动态数据
前端·javascript·vue.js
我是日安5 小时前
零到一打造 Vue3 响应式系统 Day 16 - 性能处理:LinkPool
前端·vue.js