防抖和节流

节流：高频率触发的事件,在指定的单位时间内，只响应最后一次，如果在指定的时间在触发，则重新计算时间(后面触发的事件执行，替代了前面的事件)

• scroll 事件，每隔一秒计算一次位置信息等
• 浏览器播放事件，每个一秒计算一次进度信息等

防抖：函数在一段时间内的多次调用，仅使得最后一次调用有效。

• 登录、发短信等按钮避免用户点击太快，以致于发送了多次请求，需要防抖
• 调整浏览器窗口大小时，resize 次数过于频繁，造成计算过多，此时需要一次到位，就用到了防抖
• 文本编辑器实时保存，当无任何更改操作一秒后进行保存

1、创建一个静态js文件 utils.js

// 节流
function throttle(fn, delay) {
        var end = 0
        return function () {
            var start = new Date()
            if (start - end > delay) {
                fn.apply(this, arguments)
                end = start
            }
        }
    }


// 防抖
export const deboundce = (fn, delay)=> {
        var timer = null;
        return function () {
            if (timer != null) clearTimeout(timer); 
                timer = setTimeOut(() => {
                    fn.apply(this, arguments)
                }, delay)
            }
        }
    }

2、这里以vue项目中引入方法 

<template>
  <div>
    <el-input placeholder="输入关键字进行过滤"
              @input="inputChange" 
              v-model="filterText">
    </el-input>
  </div>
</template>

<script>
import { _debounce, _throttle } from "../../static/js/utils.js";
export default {
  data() {
    return {
      filterText: "",
     
    };
  },
  methods: {
    inputChange: _throttle(function(_type, index, item) {
        console.log(this.filterText)
        // do something ...
    }, 2000)
  }
};
</script>