vue实现防抖的实例代码
导读:收集整理的这篇文章主要介绍了vue实现防抖的实例代码,觉得挺不错的,现在分享给大家,也给大家做个参考。 防抖:防止重复点击触发事件首先啥是抖? 抖就是一哆嗦!原本点一下,现在点了3下!不...
收集整理的这篇文章主要介绍了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中函数防抖节流的理解及应用实现
声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!
若转载请注明出处: vue实现防抖的实例代码
本文地址: https://pptw.com/jishu/594037.html