vue的防抖，节流使用方法

最新推荐文章于 2024-07-09 22:07:57 发布

土肥圆xulia

最新推荐文章于 2024-07-09 22:07:57 发布

阅读量74

点赞数

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_39057641/article/details/129164020

版权

vue 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

文章介绍了在Vue项目中如何创建并使用utils.js工具文件，实现防抖(debounce)和节流(throttle)功能，以优化频繁触发的事件处理，如在输入框(input)的输入事件中使用防抖来控制搜索请求的发送频率。

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

vue的防抖，节流使用方法

1.新建utils.js

// 防抖
export function _debounce(fn, delay) {
  var delay = delay || 200;
  var timer;
  return function () {
      var th = this;
      var args = arguments;
      if (timer) {
          clearTimeout(timer);
      }
      timer = setTimeout(function () {
          timer = null;
          fn.apply(th, args);
      }, delay);
  };
}
// 节流
export function _throttle(fn, interval) {
  var last;
  var timer;
  var interval = interval || 200;
  return function () {
      var th = this;
      var args = arguments;
      var now = +new Date();
      if (last && now - last < interval) {
          clearTimeout(timer);
          timer = setTimeout(function () {
              last = now;
              fn.apply(th, args);
          }, interval);
      } else {
          last = now;
          fn.apply(th, args);
      }
  }
}

2…vue页面使用

 <el-input clearable v-model="search.ProjectName" @input="selectBlur" placeholder=""></el-input>
<script>
import { _debounce } from "@/utils/index";
export default {
	methods: {
        selectBlur: _debounce(function (_type, index, item) {
            this.currentPage = 1;
            this.getData();
        }, 1000),
    }
}
</script>