vue实现防抖函数、节流函数，全局使用【输入框、按钮】

博主介绍

📢点击下列内容可跳转对应的界面，查看更多精彩内容！

🍎主页：水香木鱼
🍍专栏：后台管理系统

---

文章目录

简介：这是一篇有关【vue实现防抖函数、节流函数，全局使用【输入框、按钮】】的文章，博主用最精简的语言去表达给前端读者们。

1、input输入框防抖【单页面使用】

场景：input输入时进行查询

Ⅰ、创建utils工具，antiShake.js

/*输入框防抖*/
const antiShake = function (fn, delay) {
  let timer = null;
  return function () {
    let content = this;
    let args = arguments;
    if (timer) {
      clearTimeout(timer);
    }
    timer = setTimeout(() => {
      fn.apply(content, args);
    }, delay);
  };
};

export default antiShake;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

Ⅱ、页面使用

• 使用工具antiShake
• 使用 changeSeletc: antiShake 函数

<template>
    
    <div>
      <h1>防抖h1>
      <el-input
        v-model="serves"
        placeholder="请输入内容"
        style="width: 300px"
      >el-input>
    div>
    
template>
<script>
import antiShake from "../utils/antiShake"//使用工具antiShake
export default {
  data() {
    return {
      serves: "",
    };
  },
  methods: {
    changeSeletc: antiShake(function () {
      console.log("防抖：", this.serves);
    }, 500),
  },
  //监听输入框
  watch: {
    serves(news) {
      this.changeSeletc();
    },
  },
};
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

2、button按钮节流【写法一 全局使用】

场景：按钮点击、下拉加载、鼠标滚动、拖拽动画（节流通常用在比防抖刷新更频繁的场景下，而且大部分是需要涉及动画的操作。）

Ⅰ、创建utils工具，reduceExpenditure.js

/*按钮节流*/ 
import Vue from "vue";
const reduceExpenditure = Vue.directive("reduceExpenditure-button", {
  inserted: function (el, binding) {
    el.addEventListener("click", () => {
      // 判断按钮是否可点击
      if (!el.disabled) {
        el.disabled = true;
        setTimeout(() => {
          el.disabled = false;
        }, binding.value || 3000); //默认3秒节流时间
      }
    });
  },
});

export { reduceExpenditure };
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

Ⅱ、main.js 中全局注册

import { reduceExpenditure } from "./utils/reduceExpenditure";
Vue.prototype.$reduceExpenditure = reduceExpenditure;// 全局注册节流
1
2

Ⅲ、页面使用

使用v-reduceExpenditure-button 控制节流

<template>
    
    <div>
      <h1>节流h1>
      <el-button @click="go" v-reduceExpenditure-button>确定el-button>
    div>
    
template>    
1
2
3
4
5
6
7
8

3、button按钮节流【写法二 单页面使用】

Ⅰ、创建utils工具，throttle.js

/*按钮节流*/
const throttle = (func, delay) => {
  // 缓存一个定时器
  let timer = null;
  // 这里返回的函数是每次用户实际调用的节流函数
  return function (...args) {
    if (!timer) {
      //判断timer是否有值,如果没有则说明定时器不存在即可继续执行
      timer = setTimeout(() => {
        //关
        func.apply(this, arguments);
        timer = null; //开
      }, delay);
    }
  };
};
export default throttle;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

Ⅱ、页面使用

使用submit:throttle

<template>
   <el-button type="primary" @click="submit">提交el-button>
template>
<script>
import throttle from "@/utils/throttle"
methods:{
    submit:throttle(function()  {
		console.log('节流')
    },500)
}
script>
1
2
3
4
5
6
7
8
9
10
11

---

相关推荐

⭐Vue实现搜索关键字标红高亮加粗
⭐vue实现禁止浏览器网页缩放【方法一和方法二可同时设置】
⭐Vue实现网页首屏加载动画、页面内请求数据加载loading
⭐Vue实现任意内容展开 / 收起功能组件
⭐Vue实现点击按钮或者图标可编辑输入框