vue中使用防抖函数_vue防抖函数

一、基本概念

在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时，计时结束执行回调。（通俗来说就是当持续触发某事件时，一定时间间隔内没有再触发事件时，事件处理函数才会执行一次，如果设定的时间间隔到来之前，又一次触发了事件，就重新计时，计时结束执行回调）。
        函数防抖的基本思想是设置一个定时器，在指定时间间隔内运行代码时清楚上一次的定时器，并设置另一个定时器，知道函数请求停止并超过时间间隔才会执行。

二、使用

1、直接使用

const debounce = (function() {
  let timer = 0;
  return function(callback, ms = 200) {  //设置默认200ms
    clearTimeout(timer);
    timer = setTimeout(callback, ms);
  };
})();
 
export default {
     methods: {
        setNavLeft() {
          debounce(async () => {
            let navleft =
              parseInt(this.$refs.navr.getBoundingClientRect().left) + 846 + "px";
            this.$refs.navdiv.style.left = navleft;
          }, 100);
        },
     }
}

2、封装为公用方法

第一步，在utils文件夹下建立index.js文件

// index.js
export default {
  debounce(fn, delay = 300) {   //默认300毫秒
    let timer;
    return function () {
      let args = arguments;
      if (timer) {
        clearTimeout(timer);
      }
      timer = setTimeout(() => {
        fn.apply(this, args);   // this 指向vue
      }, delay);
    };
  }
}

第二步，组件内引入该js

import publicFn from '@/utils/index'

第三步，组件的methods方法进行调用

 
methods: {
 //开始调用
 moveOver: publicFn.debounce(function () {
      ++this.count;
      console.log(this.count)
   }, 200),
}