vue防抖节流

防抖~

代码如下（示例）：

<template>
<!-- 防抖 -->
  <div>
    <input type="text" v-model="value" @keydown="Change" />
  </div>
</template>

<script>
function debounce(func, wait = 1000) {
  let timeout;
  return function (event) {
    clearTimeout(timeout);
    timeout = setTimeout(() => {
      func.call(this, event);
    }, wait);
  };
}
export default {
  data() {
    return {
      value: "",
    };
  },
  methods: {
    Change: debounce(function (e) {
      console.log(this.value+'防抖成功');
    }),
  },
};
</script>

<style>
</style>

节流~

代码如下（示例）：

<template>
<!-- 节流 -->
  <div @click="throttle">节流测试~~~使劲点我</div>
</template>

<script>
let starttime
let timer
export default {
data() {
    return {
     
    };
  },
  methods: {
       throttle: function(){
            let that = this
            let now = +new Date();
            if(starttime && starttime - now < 2000){
                clearTimeout(timer)
            }
            timer = setTimeout(function () {
                console.log('节流成功')
                starttime = + new Date()
            },200)
        }
},
}
</script>

<style>
</style>

总结

节流

throttle 的中心思想在于：将几次操作合并为一此操作进行,在一定时间内只触发一次。

原理:是维护一个计时器，在规定时间后触发函数，但是在规定时间内再次触发的话，就会取消之前的计时器而重新设置。

防抖

防抖的中心思想在于：我会等你到底。在某段时间内，不管你触发了多少次回调，我都只认最后一次。