vue实现防抖的实例代码


Posted in Vue.js onJanuary 11, 2021

防抖:防止重复点击触发事件

首先啥是抖? 抖就是一哆嗦!原本点一下,现在点了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.js 相关文章推荐
vue开发chrome插件,实现获取界面数据和保存到数据库功能
Dec 01 Vue.js
vue使用echarts图表自适应的几种解决方案
Dec 04 Vue.js
详解vue-cli项目在IE浏览器打开报错解决方法
Dec 10 Vue.js
Vue——前端生成二维码的示例
Dec 19 Vue.js
vue实现一个获取按键展示快捷键效果的Input组件
Jan 13 Vue.js
如何在vue中使用video.js播放m3u8格式的视频
Feb 01 Vue.js
Vue接口封装的完整步骤记录
May 14 Vue.js
Vue和Flask通信的实现
May 19 Vue.js
Vue项目打包、合并及压缩优化网页响应速度
Jul 07 Vue.js
vue使用Google Recaptcha验证的实现示例
Aug 23 Vue.js
vue项目配置sass及引入外部scss文件
Apr 14 Vue.js
vue 给数组添加新对象并赋值
Apr 20 Vue.js
Vuex实现简单购物车
Jan 10 #Vue.js
Vue实现一种简单的无限循环滚动动画的示例
Jan 10 #Vue.js
基于vuex实现购物车功能
Jan 10 #Vue.js
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
Jan 08 #Vue.js
vue-quill-editor插入图片路径太长问题解决方法
Jan 08 #Vue.js
vue编写简单的购物车功能
Jan 08 #Vue.js
解决vue使用vant轮播组件swipe + flex时文字抖动问题
Jan 07 #Vue.js
You might like
PHP编码规范之注释和文件结构说明
2010/07/09 PHP
php中++i 与 i++ 的区别
2012/08/08 PHP
MacOS下PHP7.1升级到PHP7.4.15的方法
2021/02/22 PHP
php array_map()函数实例用法
2021/03/03 PHP
几个javascript操作word的参考代码
2009/10/26 Javascript
对 lightbox JS 图片控件进行了一下改造, 使其他支持复杂的图片说明
2010/03/20 Javascript
javascript调试过程中找不到哪里出错的可能原因
2013/12/16 Javascript
JS获取客户端IP地址、MAC和主机名的7个方法汇总
2014/07/21 Javascript
用NodeJS实现批量查询地理位置的经纬度接口
2016/08/16 NodeJs
Bootstarp 基础教程之表单部分实例代码
2017/02/03 Javascript
JavaScript函数节流和函数防抖之间的区别
2017/02/15 Javascript
Vue.js上下滚动加载组件的实例代码
2017/07/17 Javascript
AngularJs导出数据到Excel的示例代码
2017/08/11 Javascript
ionic3+Angular4实现接口请求及本地json文件读取示例
2017/10/11 Javascript
了解Javascript中函数作为对象的魅力
2019/06/19 Javascript
微信域名检测接口调用演示步骤(含PHP、Python)
2019/12/08 Javascript
vue 实现图片懒加载功能
2020/12/31 Vue.js
[02:57]DOTA2英雄基础教程 风行者
2014/01/16 DOTA
[01:03:13]VG vs Pain 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python中使用sys模板和logging模块获取行号和函数名的方法
2014/04/15 Python
Django基于ORM操作数据库的方法详解
2018/03/27 Python
python merge、concat合并数据集的实例讲解
2018/04/12 Python
详谈python中冒号与逗号的区别
2018/04/18 Python
使用python判断jpeg图片的完整性实例
2019/06/10 Python
python实现连连看辅助之图像识别延伸
2019/07/17 Python
详解CSS3中字体平滑处理和抗锯齿渲染
2017/03/29 HTML / CSS
酒店服务与管理毕业生求职信
2013/11/02 职场文书
感恩母亲节演讲稿
2014/05/07 职场文书
国际贸易专业自荐信
2014/06/10 职场文书
空气环保标语
2014/06/12 职场文书
教师职位说明书
2014/07/29 职场文书
挂职锻炼个人总结
2015/03/05 职场文书
2015小学教师德育工作总结
2015/05/12 职场文书
2015年网络管理员工作总结
2015/05/21 职场文书
导游词之包公祠
2019/11/25 职场文书
MySQL中TIMESTAMP类型返回日期时间数据中带有T的解决
2022/12/24 MySQL