vue实现防抖函数节流函数,全局使用输入框按钮
Posted 水香木鱼
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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;
Ⅱ、页面使用
- 使用工具
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实现防抖函数节流函数,全局使用输入框按钮的主要内容,如果未能解决你的问题,请参考以下文章