这篇文章主要给大家介绍了关于vue实现防抖的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
防抖:防止重复点击触发事件
首先啥是抖? 抖就是一哆嗦!原本点一下,现在点了3下!不知道老铁脑子是不是很有画面感!哈哈哈哈哈哈
典型应用就是防止用户多次重复点击请求数据。
vue实现防抖方法如下:
1.首先新建一个debounce.js代码如下
const debounce=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 debounce
2.在需要防抖的vue文件中引入debounce,内容如下;这是一个输入框的500ms的防抖
<template> <div class="main"> <el-input v-model="input" @change="changeSeletc" placeholder="请输入内容"></el-input> </div> </template> <script> import debounce from "../utils/debounce" export default { name: "alarm", data(){ return{ input: '' } }, methods:{ changeSeletc:debounce(function () { console.log(this.input) },500), } } </script> <style scoped> </style>
3.效果如下图
总结
到此这篇关于vue实现防抖的文章就介绍到这了,更多相关vue实现防抖内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
您可能感兴趣的文章:- 浅谈VUE防抖与节流的最佳解决方案(函数式组件)
- Vue最新防抖方案(必看篇)
- Vue的click事件防抖和节流处理详解
- vue实现手机号码的校验实例代码(防抖函数的应用场景)
- Vue.js页面中有多个input搜索框如何实现防抖操作
- 在vue+element ui框架里实现lodash的debounce防抖
- 浅析Vue 防抖与节流的使用
- vue中axios防止多次触发终止多次请求的示例代码(防抖)
- 在vue中使用防抖和节流,防止重复点击或重复上拉加载实例
- Vue中函数防抖节流的理解及应用实现
转载请说明出处
知优网 » vue实现防抖的实例代码(vue使用防抖函数)
知优网 » vue实现防抖的实例代码(vue使用防抖函数)