vue实现防抖的实例代码
更新时间:2021年01月11日 10:31:05 作者:唐生洗发用飘柔
这篇文章主要给大家介绍了关于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中this.$nextTick()方法的使用及代码示例
$nextTick()是Vue.js框架中的一个方法,它主要用于DOM操作,当我们修改Vue组件中的数据时,Vue.js会在下次事件循环前自动更新视图,并异步执行$nextTick()中的回调函数,本文主要介绍了Vue中this.$nextTick()方法的使用及代码示例,需要的朋友可以参考下2023-05-05解决Vue路由导航报错:NavigationDuplicated: Avoided redundant navig
这篇文章主要给大家介绍了关于解决Vue路由导航报错:NavigationDuplicated: Avoided redundant navigation to current location的相关资料,这是最近做项目时候遇到的一个问题,现将解决办法分享出来,需要的朋友可以参考下2023-01-01
最新评论