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

Posted 2022-12-11 水香木鱼

博主介绍

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

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

---

文章目录

简介：这是一篇有关【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;

Ⅱ、页面使用

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

<template>
    <!-- 防抖 -->
    <div>
      <h1>防抖</h1>
      <el-input
        v-model="serves"
        placeholder="请输入内容"
        style="width: 300px"
      ></el-input>
    </div>
    <!-- END! -->
</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>

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 ;

Ⅱ、main.js 中全局注册

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

Ⅲ、页面使用

使用v-reduceExpenditure-button 控制节流

<template>
    <!-- 节流 -->
    <div>
      <h1>节流</h1>
      <el-button @click="go" v-reduceExpenditure-button>确定</el-button>
    </div>
    <!-- END! -->
</template>    

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;

Ⅱ、页面使用

使用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>

---

相关推荐

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