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+iview分页组件的封装
Nov 17 Vue.js
vue-cli4.0多环境配置变量与模式详解
Dec 30 Vue.js
vue调用微信JSDK 扫一扫,相册等需要注意的事项
Jan 03 Vue.js
vue-quill-editor插入图片路径太长问题解决方法
Jan 08 Vue.js
Vue中引入svg图标的两种方式
Jan 14 Vue.js
vue引入Excel表格插件的方法
Apr 28 Vue.js
vue+element ui实现锚点定位
Jun 29 Vue.js
详解Vue项目的打包方式(生成dist文件)
Jan 18 Vue.js
vue+echarts实现多条折线图
Mar 21 Vue.js
在vue中import()语法不能传入变量的问题及解决
Apr 01 Vue.js
vue使用wavesurfer.js解决音频可视化播放问题
Apr 04 Vue.js
vue自定义右键菜单之全局实现
Apr 09 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 反射机制实现动态代理的代码
2008/10/22 PHP
php实现的支持断点续传的文件下载类
2014/09/23 PHP
PHP实现获取中英文首字母
2015/06/19 PHP
在Mac OS上搭建Nginx+PHP+MySQL开发环境的教程
2015/12/21 PHP
php 中的closure用法详解
2017/06/12 PHP
javascript 获取元素位置的快速方法 getBoundingClientRect()
2009/11/26 Javascript
IE与Firefox在JavaScript上的7个不同句法分享
2011/10/30 Javascript
点击弹出层效果&amp;弹出窗口后网页背景变暗效果的实现代码
2014/02/10 Javascript
AngularJs基于角色的前端访问控制的实现
2016/11/07 Javascript
Jquery Easyui分割按钮组件SplitButton使用详解(17)
2016/12/18 Javascript
Angularjs通过指令监听ng-repeat渲染完成后执行脚本的方法
2016/12/31 Javascript
JavaScript中的this陷阱的最全收集并整理(没有之一)
2017/02/21 Javascript
angular-ngSanitize模块-$sanitize服务详解
2017/06/13 Javascript
Vue实现搜索结果高亮显示关键字
2019/05/28 Javascript
vue实现图片预览组件封装与使用
2019/07/13 Javascript
Postman动态获取返回值过程详解
2020/06/30 Javascript
js利用iframe实现选项卡效果
2020/08/09 Javascript
[01:15:29]DOTA2上海特级锦标赛主赛事日 - 3 胜者组第二轮#2Secret VS EG第三局
2016/03/04 DOTA
python中numpy的矩阵、多维数组的用法
2018/02/05 Python
python中的插值 scipy-interp的实现代码
2018/07/23 Python
对pyqt5之menu和action的使用详解
2019/06/20 Python
下载官网python并安装的步骤详解
2019/10/12 Python
python二元表达式用法
2019/12/04 Python
opencv设置采集视频分辨率方式
2019/12/10 Python
利用jupyter网页版本进行python函数查询方式
2020/04/14 Python
CSS3盒子模型详解
2013/04/24 HTML / CSS
Melijoe时尚童装德国官网:Melijoe德国
2016/09/03 全球购物
新西兰床上用品和家居用品购物网站:Adairs
2018/04/27 全球购物
个人求职简历的自我评价
2013/10/19 职场文书
毕业生大学生活自我总结
2014/01/31 职场文书
我的中国梦演讲稿小学篇
2014/08/19 职场文书
业务员工作态度散漫检讨书
2014/11/02 职场文书
2014年乡镇党建工作总结
2014/11/11 职场文书
信用卡工资证明范本
2015/06/19 职场文书
golang interface判断为空nil的实现代码
2021/04/24 Golang
vue中this.$http.post()跨域和请求参数丢失的解决
2022/04/08 Vue.js