在vue中使用防抖函数组件操作


Posted in Javascript onJuly 26, 2020

初级

1、先写好防抖函数

/**
 * @desc 防抖函数
 * @param {需要防抖的函数} func
 * @param {延迟时间} wait
 * @param {是否立即执行} immediate
 */
export function debounce(func, wait, immediate) {
 let timeout
 
 return function(...args) {
 let context = this
 if (timeout) clearTimeout(timeout)

 if (immediate) {
 let callNow = !timeout
 timeout = setTimeout(function() {
 timeout = null
 }, wait)
 if (callNow) func.apply(context, args)
 } else {
 timeout = setTimeout(function() {
 func.apply(context, args)
 }, wait)
 }
 }
}

2、然后在要使用的组件里 import 进来

import { debounce } from 'xxx'

export default {
 data: {
 return {
 vm: this
 }
 },
 methods: {
 toDoSth: debounce((vm) => {
 // 这里将当前组件实例当参数传入
 // 就可以使用实例中定义的一些属性、方法
 // 补充一下,这里如果换成非箭头函数的写法,也可以直接访问实例。
 }, 
 500, 
 true
 )
 }
}

3、在组件方法中使用

template:

<div @click="toDoSth(vm)"></div>

高级

虽然上面的写法已经能解决问题了,但是总觉得不够美观。

在网上搜索一番,看到有个哥们将防抖封装成一个组件,果然和我想的一样。不过这哥们直接将上下文当参数传进来了,比我把整个实例传进来高明,我在这个基础上添加了 immediate 的功能,还有添加了默认不传 event 参数的情况处理。

debounce.js 文件:

import Vue from 'vue'

const debounce = (func, time, ctx, immediate) => {
 let timer
 const rtn = (...params) => {
 clearTimeout(timer)

 if (immediate) {
 let callNow = !timer
 timer = setTimeout(() => {
 timer = null
 }, time)
 if (callNow) func.apply(ctx, params)
 } else {
 timer = setTimeout(() => {
 func.apply(ctx, params)
 }, time)
 }
 }
 return rtn
}

Vue.component('Debounce', {
 abstract: true,
 props: ['time', 'events', 'immediate'],
 created() {
 this.eventKeys = this.events && this.events.split(',')
 },
 render() {
 const vnode = this.$slots.default[0]
 
 // 如果默认没有传 events,则对所有绑定事件加上防抖
 if (!this.eventKeys) {
 this.eventKeys = Object.keys(vnode.data.on)
 }
 
 this.eventKeys.forEach(key => {
 vnode.data.on[key] = debounce(
 vnode.data.on[key],
 this.time,
 vnode,
 this.immediate
 )
 })

 return vnode
 }
})

使用方式:

1、引入 debounce.js 文件

import 'xxx/debounce.js'

export default {
 methods: {
 toDoSth(e) {
 // 这里正常写就可以了
 }
 }
}

2、在模版里使用

其中time为必选参数。 event 和 immediate 参数都是可选参数。

如果组件下有多个事件绑定,那么 event 可以自定义需要进行防抖处理的事件。

如果需要立即执行的话,可以将 immediate 参数设置为 true。

<Debounce :time="500" event="click" :immediate="true">
 <button @click="toDoSth($event, 1)">click me</button>
</Debounce>

到此就完成了一次 Debounce 组件的封装。

补充知识:vue防抖函数,避免暴力点击

1.vue项目/src/components/directive/clickAgain.js

import Vue from 'vue'

const clickAgain = Vue.directive('clickAgain',{
 // 指令的定义
 bind(el, binding, vnode, oldVnode) {
  // 绑定this
  let self = vnode.context;
  el.onclick = function (e) {
   if (self._is_click) {
    return false;
   }
   /*执行指令绑定的事件*/
   self[binding.expression]()
   self._is_click=true;
   setTimeout(()=>{
    self._is_click=false;
   },2000)

  };
 }
});
export default clickAgain

2.在main.js 引入

import clickAgain from './components/directive/clickAgain.js'

/* 引入避免暴力双击点击*/

Vue.use(clickAgain);

3.使用

<a-button key="submit" type="primary" :loading="false" v-clickAgain="handleOk">
 保存
</a-button>

以上这篇在vue中使用防抖函数组件操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript之锁定表格栏位
Jun 29 Javascript
超酷的网页音乐播放器DewPlayer使用方法
Dec 18 Javascript
jQuery学习笔记之总体架构
Jun 03 Javascript
js实现模拟计算器退格键删除文字效果的方法
May 07 Javascript
jQuery+AJAX实现遮罩层登录验证界面(附源码)
Sep 13 Javascript
详解jQuery的Cookie插件
Nov 23 Javascript
jQuery插件HighCharts实现气泡图效果示例【附demo源码】
Mar 13 Javascript
js实现扫雷小程序的示例代码
Sep 27 Javascript
解决vue打包之后静态资源图片失效的问题
Feb 21 Javascript
ES6小技巧之代替lodash
Jun 07 Javascript
JavaScript通如何过RGraph实现动态仪表盘
Oct 15 Javascript
Vue基本指令实例图文讲解
Feb 25 Vue.js
Vue 中使用lodash对事件进行防抖和节流操作
Jul 26 #Javascript
浅谈vue中document.getElementById()拿到的是原值的问题
Jul 26 #Javascript
关于vue 结合原生js 解决echarts resize问题
Jul 26 #Javascript
Element Tooltip 文字提示的使用示例
Jul 26 #Javascript
Element Popover 弹出框的使用示例
Jul 26 #Javascript
Element Card 卡片的具体使用
Jul 26 #Javascript
Element Carousel 走马灯的具体实现
Jul 26 #Javascript
You might like
PHP下escape解码函数的实现方法
2010/08/08 PHP
让PHP更快的提供文件下载的代码
2012/06/13 PHP
PHP检测用户是否关闭浏览器的方法
2016/02/14 PHP
PHP实现的随机IP函数【国内IP段】
2016/07/20 PHP
php二维码生成以及下载实现
2017/09/28 PHP
php实现等比例压缩图片
2018/07/26 PHP
浅析PHP反序列化中过滤函数使用不当导致的对象注入问题
2020/02/15 PHP
js bind 函数 使用闭包保存执行上下文
2011/12/26 Javascript
JavaScript 学习笔记之操作符(续)
2015/01/14 Javascript
jQuery实现ctrl+enter(回车)提交表单
2015/10/19 Javascript
jquery实现的点击翻书效果代码
2015/11/04 Javascript
jQuery解决浏览器兼容性问题案例分析
2016/04/15 Javascript
小程序根据手机机型设置自定义底部导航距离
2019/06/04 Javascript
Python删除指定目录下过期文件的2个脚本分享
2014/04/10 Python
Python实现读取TXT文件数据并存进内置数据库SQLite3的方法
2017/08/08 Python
Python3使用PySynth制作音乐的方法
2019/09/09 Python
Python环境下安装PyGame和PyOpenGL的方法
2020/03/25 Python
Python3 hashlib密码散列算法原理详解
2020/03/30 Python
踩坑:pytorch中eval模式下结果远差于train模式介绍
2020/06/23 Python
python如何遍历指定路径下所有文件(按按照时间区间检索)
2020/09/14 Python
Selenium 配置启动项参数的方法
2020/12/04 Python
Appium+Python实现简单的自动化登录测试的实现
2021/01/26 Python
谈谈对css属性box-sizing的了解
2017/01/04 HTML / CSS
英国口碑最好的的维他命胶囊品牌:Myvitamins(有中文站)
2016/12/03 全球购物
Clarria化妆品官方网站:购买天然和有机化妆品系列
2018/04/08 全球购物
华为菲律宾官方网站:HUAWEI Philippines
2021/02/23 全球购物
Linux管理员面试经常问道的相关命令
2014/12/12 面试题
介绍一下EJB的体系结构
2012/08/01 面试题
工商管理专业应届生求职信
2013/11/04 职场文书
心理健康教育心得体会
2013/12/29 职场文书
职业生涯规划书前言
2014/04/15 职场文书
商业计算机应用专业自荐书
2014/06/09 职场文书
防暑降温通知书
2015/04/27 职场文书
公司借条范本
2015/05/25 职场文书
MySQL中distinct和count(*)的使用方法比较
2021/05/26 MySQL
MySQL系列之八 MySQL服务器变量
2021/07/02 MySQL