vue实现防抖函数、节流函数,全局使用【输入框、按钮】
Vue 实现 函数 按钮 全局 输入框 节流 防抖
2023-09-27 14:27:10 时间
博主介绍
📢点击下列内容可跳转对应的界面,查看更多精彩内容!
文章目录
简介:这是一篇有关【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中使用SockJS实现webSocket通信
- Vue实现拖拽穿梭框功能四种方式
- 【Vue】Vuex的安装和实现【全局参数传递】实例(图文+完整源代码)
- vue+iview后台管理系统util.ajax跨域问题的解决方法
- vue-cli中配置sass
- 从实现吸顶效果看vue生命周期
- Vue - 超详细 Element 组件库主题颜色进行 “统一全局“ 替换,将默认的蓝色主题色更换为其他自定义颜色(保姆级教程,简易且标准全局替换主题色)
- Vue - 根据输入关键字过滤数组列表(列表搜索功能)
- Vue项目--尚品汇(图片懒加载,表单验证)
- vue使用elementPlus
- vue 使用element-ui实现table表单列展示与隐藏
- vue报错 :NavigationDuplicated {_name: "NavigationDuplicated", name: "NavigationDuplicated"}
- Vue中v-model解析、sync修饰符解析
- vue实战入门进阶篇十:vue+elementui实现网站后台-代码重构及发布
- vue中单选框与多选框的实现与美化
- vue实现全屏滚动,非fullpage.js
- 解决Error: Cannot find module ‘@vue/cli-shared-utils‘
- Vue 之 vue-seamless-scroll 实现简单自动无缝滚动,且添加对应点击事件的简单整理
- vue实现登录、注册、退出、跳转等功能,简单实用
- ejs结合vue实现SSR ,express+ejs+vue = 服务器端渲染 ?Vue-SSR的奇思妙想