小白也能学会的uni-app前端防抖与节流方法大放送！

前端

2022-11-26 19:02:24

前端开发中的节流和防抖

什么是节流和防抖？

在前端开发中，节流和防抖是两个至关重要的概念，它们通过控制函数的调用频率来优化网站性能和用户体验。

节流是指在一定时间间隔内，只执行一次函数。这在诸如按钮点击事件或滚动事件等场景中非常有用，以防止因快速重复触发而导致的性能问题。

防抖是指在一定时间间隔内，如果函数被重复调用，只执行最后一次函数调用。这在诸如输入框输入事件等场景中非常有用，以防止因频繁触发而导致的性能问题或意外行为。

在uni-app中实现节流和防抖

实现防抖

在uni-app中，我们可以使用 debounce 函数来实现防抖。这个函数接收两个参数：要防抖的函数和一个时间间隔。每次调用该函数时，如果自上次调用后已经过了指定的时间间隔，它才会执行该函数。

// 防抖函数
const debounce = (func, wait) => {
  let timer;
  return function (...args) {
    if (timer) clearTimeout(timer);
    timer = setTimeout(() => {
      func.apply(this, args);
    }, wait);
  };
};

// 使用防抖函数
const handleClick = debounce(() => {
  console.log('按钮被点击了');
}, 300);

// 按钮点击事件
<button @click="handleClick">点击我</button>

实现节流

在uni-app中，我们可以使用 throttle 函数来实现节流。这个函数接收两个参数：要节流的函数和一个时间间隔。每次调用该函数时，如果自上次调用后尚未达到指定的时间间隔，它将不会执行该函数。

// 节流函数
const throttle = (func, wait) => {
  let lastTime = 0;
  return function (...args) {
    const now = new Date().getTime();
    if (now - lastTime < wait) return;
    lastTime = now;
    func.apply(this, args);
  };
};

// 使用节流函数
const handleScroll = throttle(() => {
  console.log('滚动事件被触发了');
}, 300);

// 滚动事件
<scroll-view @scroll="handleScroll">
  <!-- 内容 -->
</scroll-view>