vue 防抖函数的封装以及使用

Vue 防抖节流函数的封装使用

说明

防抖函数

• 防抖函数的作用是，当函数被多次调用时，只有最后一次调用会生效，并在一定时间内忽略之前的调用。
• 防抖函数的实现原理是，在函数被调用 n 秒后，重新计时，如果在这 n 秒内再次被调用，则重新计时，直到 n 秒后，才执行函数。
• 防抖函数的执行频率比节流函数低。
• 防抖函数的使用场景是，输入框的实时搜索。

节流函数

• 节流函数的作用是，在函数被连续调用时，每隔一段时间执行一次，并在这段时间内忽略掉多余的调用。
• 节流函数的实现原理是，在函数被调用 n 秒后，重新计时，如果在这 n 秒内再次被调用，则重新计时，直到 n 秒后，才执行函数。
• 节流函数的执行频率比防抖函数高。
• 节流函数的使用场景是，页面的滚动，鼠标移动，拖拽等。

防抖函数 与 节流函数的区别

• 防抖函数和节流函数的区别在于触发频率，防抖函数在一定时间内只会执行一次，节流函数在一定时间内只会执行一次，但是节流函数的执行频率会比防抖函数高。
• 防抖函数和节流函数的使用场景不同，防抖函数适用于输入框的实时搜索，节流函数适用于页面的滚动。

防抖函数

function debounce(func, wait) {
  let timeout;
  return function() {
    clearTimeout(timeout);
    timeout = setTimeout(() => {
      func.apply(this, arguments);
    }, wait);
  };
}

节流函数

function throttle(func, wait) {
  let timeout;
  return function() {
    if (!timeout) {
      timeout = setTimeout(() => {
        timeout = null;
        func.apply(this, arguments);
      }, wait);
    }
  };
}

在 Vue 中进行封装

防抖函数封装

// 防抖函数
export function debounce (func, wait) {
  let timeout;
  return function() {
    clearTimeout(timeout);
    timeout = setTimeout(() => {
      func.apply(this, arguments);
    }, wait);
  };
};

export const debounce2 = (func, wait) => {
  let timeout;
  return function() {
    clearTimeout(timeout);
    timeout = setTimeout(() => {
      func.apply(this, arguments);
    }, wait);
  };
};

// 或者在 Vue 原型上挂载
Vue.prototype.$debounce = debounce;

节流函数封装

// 节流函数
export function throttle (func, wait) {
  let timeout;
  return function() {
    if (!timeout) {
      timeout = setTimeout(() => {
        timeout = null;
        func.apply(this, arguments);
      }, wait);
    }
  };
};

export const throttle2 = (func, wait) => {
  let timeout;
  return function() {
    if (!timeout) {
      timeout = setTimeout(() => {
        timeout = null;
        func.apply(this, arguments);
      }, wait);
    }
  };
};

// 或者在 Vue 原型上挂载
Vue.prototype.$throttle = throttle;

使用

// 组件中使用
export default {
  data() {
    return {
      inputValue: ''
    }
  },
  methods: {
    handleInput() {
      // 防抖函数
      this.inputValue = this.$debounce(this.handleInput2, 1000)(this.inputValue);
    },
    handleInput2() {
      console.log(this.inputValue);
    },
    handleClick() {
      // 节流函数
      this.handleClick2 = this.$throttle(this.handleClick2, 1000);
      this.handleClick2();
    },
    handleClick2() {
      console.log('click');
    }
  }
}

注意事项

• 防抖函数和节流函数的区别在于触发频率，防抖函数在一定时间内只会执行一次，节流函数在一定时间内只会执行一次，但是节流函数的执行频率会比防抖函数高。
• 防抖函数和节流函数的使用场景不同，防抖函数适用于输入框的实时搜索，节流函数适用于页面的滚动。