防抖和节流

1.为什么会有防抖和节流？

• 防抖和节流均是为了防止频繁触发，消耗过多资源，甚至可能导致服务器崩溃这样的情况出现，从而提出的解决方法。

2.什么是防抖和节流？

• 防抖：从字面意思理解就是防止抖动，众所周知，在抖动的情况下容易发生高频触发。为了避免这种情况，防抖的核心就是<延迟执行>，当间隔时间大于规定时间，才会触发执行方法。适用场景：实时搜索、拖拽。
• 节流：字面翻译-->节省流量。节流是指若在规定的间隔时间内仍频繁重复操作，请求方法并不会重新发送，直到中间间隔时间大于规定的间隔时间，才会重新触发请求。适用场景：抢购疯狂点击。

3.防抖和节流的共同点和区别？

共同点：

• 1.防抖和节流均是为了防止频繁触发、消耗过多资源而提出的解决方法。
• 2.防抖和节流的核心思想，均是设定一个规定的空隙时间，只有等待时间超过空隙时间才会请求数据。
• 3.防抖和节流的实现均要利用闭包，保护局部变量。

区别：

• 防抖是延迟执行，等待时间超过规定时间才会执行。
• 节流是立即执行，中间等待时间超过规定时间才会再次执行。

4.防抖和节流示例：

以下用实时搜索和疯狂点击进行举例。

<template>
  <div>
    <el-input v-model.lazy="keyword" @input="getKw" suffix-icon="el-icon-search"></el-input>
    <el-button size="small" type="primary" @click="readyToOrder">点击购买</el-button>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      keyword: "",
    };
  },
  methods: {
    /**
     * 防抖函数
     */
    _debounce(handler, delay,context) {
      let timer = null;
      return function() {
        clearTimeout(timer);
        timer = setTimeout(() => {
          handler.apply(context);
        }, delay);
      };
    },
    /**
     * 节流函数
     */
    _throttle(handler, wait,context) {
      let lastTime = 0;
      return function() {
        let now = new Date().getTime();
        if (now - lastTime > wait) {
          handler.apply(context);
          lastTime = now;
        }
      };
    },
    /**
     * 防抖请求
     */
    request() {
      console.log("准备发送请求了");
    },
    /**
     * 节流请求
     */
    request1() {
      console.log("准备发送请求了1");
    },
    /**
     * 获取关键字（防抖）
     */
    getKw(keyword) {
      if (keyword) {
        this.debounce();
      }
    },
    /**
     * 点击购买（节流）
     */
    readyToOrder() {
      this.throttle();
    },
    
  },
  created() {
    this.debounce = this._debounce(this.request, 1000,this);
    this.throttle = this._throttle(this.request1, 1000,this);
  },
  mounted() {}
};
</script>
<style lang='scss' scoped>
</style>