精通Vue中的防抖与节流：优化用户体验的神兵利器

前端

2023-11-22 12:14:54

防抖与节流：点亮 Vue 中的性能优化

拨开迷雾：揭开防抖与节流的神秘面纱

在前端开发的广阔舞台上，防抖与节流如同两柄利刃，削铁如泥般优化着用户体验。它们通过延迟函数执行，巧妙地减少不必要的调用，轻装上阵，让浏览器挥洒自如，网页疾风电掣般响应。

防抖，顾名思义，犹如一名镇定的门卫，耐心等待函数连续触发一段时间后才开门放行。这对于搜索框中的自动完成功能至关重要，防止用户手指狂舞时触发过多的请求。

节流则更像一名恪尽职守的交通警察，严格把控函数执行的频率，无论触发频率多么高，它都只允许函数在固定的时间间隔内执行一次。这在页面滚动时的无限加载功能中大显神威，确保了平稳的加载体验。

踏入 Vue 的世界：解锁防抖与节流的强大威力

在 Vue 的怀抱中，防抖与节流可以借助装饰器或自定义指令实现。装饰器犹如一位贴心的管家，为类或方法锦上添花；自定义指令则是 Vue 的专属法宝，让你随心所欲地拓展其功能。

装饰器的妙用

import {debounce, throttle} from 'lodash';

// 使用 lodash 的 debounce 实现防抖
@debounce(500)
onSearch() {
  // 搜索逻辑在这里闪亮登场
}

// 使用 lodash 的 throttle 实现节流
@throttle(1000)
onScroll() {
  // 滚动逻辑在此尽情释放
}

自定义指令的魅力

Vue.directive('debounce', {
  bind(el, binding) {
    const delay = binding.value || 500;
    let timer = null;

    el.addEventListener('click', () => {
      if (timer) {
        clearTimeout(timer);
      }

      timer = setTimeout(() => {
        binding.value();
      }, delay);
    });
  },
});

Vue.directive('throttle', {
  bind(el, binding) {
    const delay = binding.value || 1000;
    let lastCallTime = 0;

    el.addEventListener('click', () => {
      const now = Date.now();

      if (now - lastCallTime > delay) {
        binding.value();
        lastCallTime = now;
      }
    });
  },
});