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

这是我参与8月更文挑战的第10天，活动详情查看：8月更文挑战

1. 简介

1.1 函数防抖(debounce)

定义： 在事件被触发n秒后再执行回调，若是在这n秒内又被触发，则从新计时；(相似于 王者荣耀回城效果）

典型的案例: 输入搜索：输入结束后n秒才进行搜索请求，n秒内又输入的内容，就从新计时。

实现原理： 函数防抖的基本思想是设置一个定时器，在指定时间间隔内运行代码时清楚上一次的定时器，并设置另外一个定时器，知道函数请求中止并超过期间间隔才会执行。

使用场景：

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

1.2 函数节流(throttle)

定义： 规定在一个单位时间内，只能触发一次函数，若是这个单位时间内触发屡次函数，只有一次生效；

典型的案例: 鼠标不断点击触发，规定在n秒内屡次点击只有一次生效。

实现原理： 原理是用时间戳来判断是否已到回调该执行时间，记录上次执行的时间戳，而后每次触发 scroll 事件执行回调，回调中判断当前时间戳距离上次执行时间戳的间隔是否已经到达 规定时间段，若是是，则执行，并更新上次执行的时间戳。

使用场景：

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

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>
复制代码