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

Posted 水香木鱼

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue实现防抖函数节流函数,全局使用输入框按钮相关的知识,希望对你有一定的参考价值。

博主介绍

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

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


文章目录

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

input输入框防抖 button按钮节流

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实现点击按钮或者图标可编辑输入框

以上是关于vue实现防抖函数节流函数,全局使用输入框按钮的主要内容,如果未能解决你的问题,请参考以下文章

【js】简单理解节流与防抖,搜索框的场景

vue实现输入框的模糊查询(节流函数的应用场景)

vue中节流函数实现搜索数据

Flutter中的节流与防抖(过滤重复点击)

vue 简单实现函数防抖(debounce)和节流(throttle)

JS中节流和防抖函数的实现和区别