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;
  };
相关推荐
周周爱喝粥呀14 小时前
【案例】Three.js 模拟水波纹与天空场景(附案例代码)
前端·javascript·vue.js·3d
顾辰逸you14 小时前
mixins实现逻辑复用
前端·vue.js·vuex
前端小巷子15 小时前
Vue 项目性能优化实战
前端·vue.js·面试
夏小花花16 小时前
关于牙科、挂号、医生类小程序或管理系统项目 项目包含微信小程序和pc端两部分
前端·javascript·vue.js·微信小程序·小程序
柯南二号20 小时前
【大前端】Vue 和 React 主要区别
前端·vue.js·react.js
小光学长1 天前
基于vue驾校管理系统的设计与实现5hl93(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。
前端·数据库·vue.js
wow_DG1 天前
【前端面试题✨】Vue篇(一)
前端·javascript·vue.js
黄焖鸡能干四碗1 天前
固定资产管理系统(蓝牙标签打印+移动端Java+Vue+Uniapp源码)
java·开发语言·vue.js·eclipse·uni-app
一叶难遮天1 天前
快速入门Vue3——基础语法
vue.js·生命周期·条件渲染·计算属性·双向绑定·常用模板·vue语法