Vue中实现函数的防抖、节流及应用场景

飞熊 • 2023年4月28日上午10:15 • 前端开发 • 阅读 375

1. 简介

1.1 函数防抖(debounce)
定义： 在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时；(类似于王者荣耀回城效果~~）
典型的案例输入搜索：输入结束后n秒才进行搜索请求，n秒内又输入的内容，就重新计时。
实现原理： 函数防抖的基本思想是设置一个定时器，在指定时间间隔内运行代码时清楚上一次的定时器，并设置另一个定时器，知道函数请求停止并超过时间间隔才会执行。
使用场景：

搜索框搜索输入，最后一次输入完成后，再发送请求；
手机号、邮箱的输入验证；
window 触发 resize 的时候，不断的调整浏览器窗口大小会不断的触发这个事件，用防抖来让其只触发一次；

1.2 函数节流(throttle)
定义： 规定在一个单位时间内，只能触发一次函数，如果这个单位时间内触发多次函数，只有一次生效；
典型的案例鼠标不断点击触发，规定在n秒内多次点击只有一次生效。
实现原理： 原理是用时间戳来判断是否已到回调该执行时间，记录上次执行的时间戳，然后每次触发 scroll 事件执行回调，回调中判断当前时间戳距离上次执行时间戳的间隔是否已经到达规定时间段，如果是，则执行，并更新上次执行的时间戳。
使用场景：

DOM 元素的拖拽功能实现（mousemove）；
表单的多次点击提交；
计算鼠标移动的距离（mousemove）；
Canvas 模拟画板功能（mousemove）；
射击游戏的 mousedown/keydown 事件（单位时间只能发射一颗子弹）；
滚动加载，加载更多的操作；

2. 代码实现

在Vue2.x中，我们将防抖和节流函数写在utils文件夹下方便需要的时候引用

// 防抖
function _debounce(fn, delay = 500) {
  var timer = null;
  return function () {
    var _this = this;
    var args = arguments;
    if (timer) clearTimeout(timer); 
    timer = setTimeout(function () {
      fn.apply(_this, args);
    }, delay);
  };
}

// 节流
function _throttle(fn,delay = 1000){
  var lastTime, timer, delay;
  return function(){
    var _this = this;
    var args = arguments;
    var nowTime = Date.now(); 
    if(lastTime && nowTime - lastTime < delay){
      if (timer) clearTimeout(timer); 
      timer = setTimeout(function(){
        lastTime = nowTime;
        fn.apply(_this,args);
      },delay)
    }else{
      lastTime = nowTime;
      fn.apply(_this,args);
    } 
  }
}  

export {
  _debounce,
  _throttle,
}

组件中引用

<template>
  <div class="about">
    <el-input v-model="inputVal" placeholder="请输入内容" @input="inputChange"></el-input>
  </div>
</template>

<script>
import {_debounce, _throttle} from '@/utils/index.js'
export default {
  data() {
    return {
      inputVal:'',
      count:0,
    };
  },
  methods: {
    // input值改变时触发
    inputChange:_debounce(function(){
      console.log(this.inputVal)
    },1000),
    // 滚动条滚动时触发
    scroll(){
      this.count += 1;
      console.log('scroll触发了'+ this.count +'次')
    }
  },
  mounted() {
    window.addEventListener('scroll', _throttle(this.scroll,5000));
  },
};
</script>

<style lang="stylus" scoped>
.about{
  width:100%;
  height:800px;
}
</style>