vue 实现防抖和节流

        日常开发过程中，可能会有监听鼠标移动或者输入框自动提交等需求。这时有个问题，就是会连续触发事件。如果电脑配置差，可能会卡顿，或者这样造成了资源浪费。对于一个资深前端，这是不允许发生的事，因此，debounce（防抖）和throttle（节流）就出现了。

防抖

        防抖通俗来讲就是一直触发的事件，在没有触发后一定时间内，重新执行事件处理方法。实现方式可以用setTimeout，话不多说，上代码。

创建utils.js文件，把节流方法放这里，

var debounce=(func,delay)=>{
    var timer = null;
    return function() {
        var context = this;
        var args = arguments;
        if (timer) {
            clearTimeout(timer)
        }
        timer = setTimeout(function() {
            func.apply(context, args);
            timer = null;
        }, delay);
    }
}

export default debounce;

然后，在我们的组件里面引入并使用；

<template>
  <div>防抖和节流：{{ num }}</div>
</template>

<script>
import debounce from "./utils";
export default {
  data() {
    return {
      num: 0,
    };
  },
  methods: {
    numAdd() {
      this.num++;
    },
    numA: debounce(function(){this.num++}, 1000),
  },
  mounted() {
    window.onmousemove = () => {
      this.numA();
    };
  },
};
</script>

<style>
</style>

  这里注意：debounce()里面的func必须是上面写法，不然不生效哦！

节流

        节流通俗来讲就是一直触发的事件，在一定时间间隔内执行事件处理方法。实现方式可以用setTimeout。

还是把节流方法放在工具类里，

var Throttle =(func,delay)=>{
    var timer = null;
    return function() {
        var context = this;
        var args = arguments;
        if (!timer) {
            timer = setTimeout(function() {
                func.apply(context, args);
                timer = null;
            }, delay);
        }
    }
}

export default Throttle;

在组件中使用，

<template>
  <div>防抖和节流：{{ num }}</div>
</template>

<script>
import Throttle from "./utils";
export default {
  data() {
    return {
      num: 0,
    };
  },
  methods: {
    numAdd() {
      this.num++;
    },
    numA:Throttle(function(){this.num++}, 1000),
  },
  mounted() {
    window.onmousemove = () => {
      this.numA();
    };
  },
};
</script>

<style>
</style>

        以上就是防抖和节流的用法了，不懂的可以深入去学习一下哦！！！