vue项目的防抖和节流

一，防抖的运用

<template>
  <div>
    搜索:<input type="text" v-model="value" @keydown="clickRun" />
  </div>
</template>

<script>
/**
 * @desc 函数防抖
 * @param func 目标函数
 * @param wait 延迟执行毫秒数
 * @param immediate true - 立即执行， false - 延迟执行
 * @param 三个参数，第二，三个参数可以省略，默认为1000，false
 */
function debounce(func, wait, immediate) {
  let timer;
  wait = wait || 1000;
  return function () {
    let context = this,
      args = arguments;
    if (timer) clearTimeout(timer);
    if (immediate) {
      let callNow = !timer;
      timer = setTimeout(() => {
        timer = null;
      }, wait);
      if (callNow) func.apply(context, args);
    } else {
      timer = setTimeout(() => {
        func.apply(context, args);
      }, wait);
    }
  };
}
export default {
  data() {
    return {
      value: "",
    };
  },
  methods: {
    clickRun: debounce(function () {
      console.log(this.value);
    }),
  },
};
</script>

二，节流的运用

<template>
  <div>节流:<input type="text" v-model="value" @input="clieckRun" /></div>
</template>

<script>
/**
 * @function throttle 函数节流
 * @param {Function} fn 需要节流的函数
 * @param {Number} interval 间隔时间
 * @return {Function} 经过节流处理的函数
 * */
function throttle(fn, interval) {
  let timer = null; // 定时器
  let firstTime = true; // 判断是否是第一次执行
  // 利用闭包
  return function () {
    // 拿到函数的参数数组
    let args = Array.prototype.slice.call(arguments, 0);
    // 拿到当前的函数作用域
    let _this = this;
    // 如果是第一次执行的话，需要立即执行该函数
    if (firstTime) {
      // 通过apply，绑定当前函数的作用域以及传递参数
      fn.apply(_this, args);
      // 修改标识为null，释放内存
      firstTime = null;
    }
    // 如果当前有正在等待执行的函数则直接返回
    if (timer) return;
    // 开启一个倒计时定时器
    timer = setTimeout(function () {
      // 通过apply，绑定当前函数的作用域以及传递参数
      fn.apply(_this, args);
      // 清除之前的定时器
      timer = null;
      // 默认300ms执行一次
    }, interval || 300);
  };
}
export default {
  data() {
    return {
      value: "",
    };
  },
  methods: {
    clieckRun: throttle(function () {
      console.log(this.value);
    }, 300),
  },
};
</script>