防抖和节流在vue中的具体使用

前言

防抖和节流属于性能优化的知识。它们都是基于短时间内高频的操作场景，例如输入，点击，滚动等，下面介绍下结合vue组件的具体使用

---

一、防抖

• 对于短时间内连续触发的事件，防抖就是不立即执行事件，给出一个时间期限（如1000毫秒），若在时间期限内再次触发，取消之前时间计时，重新开始计时；若无再次触发，则在时间期限到后执行。
• 最终效果：如果短时间内高频触发同一事件，只会执行一次函数。
• 实际应用
  搜索框搜索输入。只需用户最后一次输入完，再发送请求
  手机号、邮箱验证输入检测
  窗口大小Resize。只需窗口调整完成后，计算窗口大小。防止重复渲染。

示例一：在组件中定义防抖函数，全局计时器放在data中定义

<template>
	<button @click="clickme">点击按钮</button>
</template>
<script>
export default {
  data() {
    return {
      timer: null
    }
  },
  methods: {
    clickme() {
      console.log('click')
      this.debounce(this.clickHandle, 2000);
    },
    clickHandle() {
      console.log('click handle')
    },
    debounce(fn, delay) {
       this.timer && clearTimeout(this.timer); // 存在计时器就销毁
       this.timer = setTimeout(fn, delay);
    }
  }
}
</script>

示例二：在工具库中定义防抖函数Debounce，全局timer通过闭包实现

export const Debounce = function(fn, delay) {
    var timer = null;
    return function () {
        console.log('timer', timer)
        if (timer) {
            clearTimeout(timer);
        }
        timer = setTimeout(fn, delay);
    }
}

<template>
	<button @click="clickme">点击按钮</button>
</template>
<script>
import {Debounce} from '../utils/common.js'

export default {
  methods: {
    clickme: Debounce(function() {
      console.log('click handle')
    }, 2000)
  }
}
</script>

二、节流

• 对于短时间内连续触发的事件，节流就是，给出一个时间期限（如1000毫秒），每隔一个时间期限后才触发执行，其他时间均为无效，不执行状态。
• 最终效果：如果短时间内高频触发同一事件，每隔一个设定的时间间隔才执行一次。
• 实际应用：
  scroll滚动加载，加载更多或滚到底部监听
  搜索联想功能
  高频点击提交，表单重复提交

方案一：setTimeout+valid标志位

//...
data() {
    return {
      timer: null,
      valid: true,
      time: Date.now(),
    }
},
methods: {
	clickme() {
      console.log('click')
      this.throttle(this.clickHandle, 2000);
    },
    clickHandle() {
      console.log('click handle')
    },
	throttle(fn, delay) {
      if(!this.valid) {
        return false
      }
      this.valid = false;
      setTimeout(() => {
        fn(); // 执行
        this.valid = true; // 执行完，状态重新激活
      }, delay)
    }
}

方案二：时间戳

clickme() {
      console.log('click')
      this.throttle2(this.clickHandle, 2000);
},
clickHandle() {
      console.log('click handle')
},
throttle2(fn, delay) {
     if(Date.now() - this.time >= delay) {
        fn();
        this.time = Date.now();
     }
}

---

总结

开发时的实际使用场景：Input输入实时搜索、页面resize重新渲染（防抖）、滚动条onscroll事件、表单提交