vue 防抖与节流

封装防抖与节流函数

防抖：是将多次执行变成一次执行
节流：是将多次执行变为每隔一段时间执行

使用场景：防抖：短信验证码、提交表单、resize事件、input事件

                  节流：scroll事件，单位时间后计算一次滚动位置、input事件，实现实时关键字查找、                               播放事件，计算进度条 

utils .js中封装两个函数，debounce、throttle

 /**
   * 防抖
   * @param {function} fn 执行函数
   * @param {number} delay等待时间，毫秒
   * @param {boolean} immediate 是否立即执行
   */

export function debounce(fn, delay = 500, immediate) {
  let timer;
  return function() {
    console.log(111);
    const args = arguments;
    console.log(args);
    if (timer) {
      // 清除计时器，但是timer本身还在，只是不会再执行
      clearTimeout(timer);
    }
    if (immediate) {
      // 总是执行第一次操作
      let callNow = !timer; // 第一次为true
      // 多次操作，timer初始化，多次触发只当delay等待时间结束，timer才为空
      timer = setTimeout(() => {
        timer = null;
      }, delay);
      if (callNow) fn.apply(this, args);
    } else {
      // 总是执行最后一次操作
      // console.log(fn);
      timer = setTimeout(() => {
        fn.apply(this, args);
      }, delay);
    }
  };
}

 /**
   * 节流
   * @param {function} fn 执行函数
   * @param {number} interval间隔执行时间，毫秒
   */
export function throttle(fn, interval = 500) {
  var last;
  var timer;
  return function () {
    var th = this;
    var args = arguments;
    var now = +new Date();
    if (last && now - last < interval) {
      clearTimeout(timer)
      timer = setTimeout(() => {
        last = now;
        fn.apply(th, args)
      })
    } else {
      last = now;
      fn.apply(th, args);
    }

  }
}

在项目中使用，引入函数

import {debounce, throttle} from '@/utils/utils.js' 
methods: {
  // 1:多次操作只执行第一次操作。
  submit: debounce(
    function(){
      // dosomething
    },
    500,
    true
  ),
  // 1:多次操作只执行最后一次操作。
  submit: debounce(
    function(){
      // dosomething
    },500
  ),
}