在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 相关文章推荐
jQuery封装的tab选项卡插件分享
Jun 16 Javascript
Js 获取、判断浏览器版本信息的简单方法
Aug 08 Javascript
纯js实现手风琴效果代码
Apr 17 Javascript
微信小程序 form组件详解
Oct 25 Javascript
基于JavaScript实现五子棋游戏
Aug 26 Javascript
vue 本地服务不能被外部IP访问的完美解决方法
Oct 29 Javascript
详解Vue内部怎样处理props选项的多种写法
Nov 06 Javascript
你或许不知道的一些npm实用技巧
Jul 04 Javascript
微信小程序图片左右摆动效果详解
Jul 13 Javascript
JS实现动态星空背景效果
Nov 01 Javascript
JS异步宏队列微队列原理详解
Sep 09 Javascript
浅谈react路由传参的几种方式
Mar 23 Javascript
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
怎么使 Mysql 数据同步
2006/10/09 PHP
php socket实现的聊天室代码分享
2014/08/16 PHP
PHP用反撇号执行外部命令
2015/04/14 PHP
基于linnux+phantomjs实现生成图片格式的网页快照
2015/04/15 PHP
yii用户注册表单验证实例
2015/12/26 PHP
highchart数据源纵轴json内的值必须是int(详解)
2017/02/20 PHP
yii gridview实现时间段筛选功能
2017/08/15 PHP
Laravel配置全局公共函数的方法步骤
2019/05/09 PHP
javascript 获取select下拉列表值的代码
2009/09/07 Javascript
浏览器兼容console对象的简要解决方案分享
2013/10/24 Javascript
jquery遍历checkbox介绍
2014/02/21 Javascript
js中的cookie的读写操作示例详解
2014/04/17 Javascript
原生JS和JQuery动态添加、删除表格行的方法
2015/05/28 Javascript
Bootstrap CSS组件之按钮下拉菜单
2016/12/17 Javascript
Angularjs验证用户输入的字符串是否为日期时间
2017/06/01 Javascript
jQuery 实现图片的依次加载图片功能
2017/07/06 jQuery
[js高手之路]HTML标签解释成DOM节点的实现方法
2017/08/31 Javascript
浅谈React + Webpack 构建打包优化
2018/01/23 Javascript
Vue 列表上下过渡效果的实例代码
2019/06/25 Javascript
vue实现分页栏效果
2019/06/28 Javascript
node删除、复制文件或文件夹示例代码
2019/08/13 Javascript
浅析vue-router中params和query的区别
2019/12/24 Javascript
Vue组件为什么data必须是一个函数
2020/06/11 Javascript
python中的sort方法使用详解
2014/07/25 Python
tensorflow: 查看 tensor详细数值方法
2018/06/13 Python
python实现宿舍管理系统
2019/11/22 Python
keras输出预测值和真实值方式
2020/06/27 Python
如何让python的运行速度得到提升
2020/07/08 Python
英国最大的在线运动补充剂商店:Discount Supplements
2017/06/03 全球购物
中专毕业生自我鉴定范文
2013/11/09 职场文书
简短的公司员工自我评价分享
2013/11/13 职场文书
八项规定整改措施
2014/02/12 职场文书
2014年政务公开工作总结
2014/12/09 职场文书
酒店收银员岗位职责
2015/04/07 职场文书
2019朋友新婚祝福语精选
2019/10/10 职场文书
python如何利用cv2模块读取显示保存图片
2021/06/04 Python