vue实现防抖与节流

跟着阿龙学编程

已于 2022-09-07 13:16:34 修改

阅读量456

点赞数 1

文章标签： vue.js javascript 前端

于 2022-09-07 10:26:45 首次发布

本文链接：https://blog.csdn.net/longshao_520/article/details/126740143

版权

本文介绍了如何在 Vue.js 中实现事件处理的节流和防抖技术。首先展示了使用节流限制搜索按钮点击事件的频率，通过设置定时器确保每隔指定时间（如2秒）才执行搜索操作。接着，展示了防抖技术在输入框 input 事件中的应用，每次输入后会清除定时器并在一段时间无输入后执行回调函数，避免频繁调用。这两种技术有助于提高应用性能，减少不必要的计算和请求。

摘要由CSDN通过智能技术生成

vue实现防抖与节流

- 1. 节流
- 2. 防抖

1. 节流

1.写一个input 再写一个搜索按钮
2.搜索按钮点击事件传入一个时间 2000就是两秒

<template>
  <div class="jieliu">
    <input type="text" name="" id="" v-model="value" />
    <button @click="changes(2000)">搜索</button>
  </div>
</template>

3.判断如果flag 为true 就让flag =false
4.写一个定时器定时器里面再让flag=true

export default {
  data() {
    return {
      value: "",
      flag: true,
    };
  },
  methods: {
    changes(t) {
      if (this.flag == true) {
        this.flag = false;
        setTimeout(() => {
          this.logs();
          this.flag = true;
        }, t);
      }
    },
    logs() {
      console.log(this.value);
    },
  },
};

2. 防抖

1.input事件

<template>
  <div class="">
    <input type="text" v-model="value" @input="changes(log, 2000)" />
    <button>搜索</button>
  </div>
</template>

每次触发input事件就先清除定时器

export default {
  data() {
    return {
      value: "",
      timer: null,
    };
  },
  methods: {
    changes(fn, t) {
      clearTimeout(this.timer);
      this.timer = setTimeout(() => {
        fn();
      }, t);
    },
    log() {
      console.log(this.value);
    },
  },
};