在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 相关文章推荐
PHP 与 js的通信(via ajax,json)
Nov 16 Javascript
jquery实现非叠加式的搜索框提示效果
Jan 07 Javascript
jQuery oLoader实现的加载图片和页面效果
Mar 14 Javascript
jQuery+CSS3实现3D立方体旋转效果
Nov 10 Javascript
详解闭包解决jQuery中AJAX的外部变量问题
Feb 22 Javascript
bootstrap轮播图示例代码分享
May 17 Javascript
基于vue2.0的活动倒计时组件countdown(附源码下载)
Oct 09 Javascript
Vue函数式组件-你值得拥有
May 09 Javascript
Vue响应式原理Observer、Dep、Watcher理解
Jun 06 Javascript
JS Generator 函数的含义与用法实例总结
Apr 08 Javascript
Vue 监听元素前后变化值实例
Jul 29 Javascript
React倒计时功能实现代码——解耦通用
Sep 18 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
全国FM电台频率大全 - 28 甘肃省
2020/03/11 无线电
PHP时间戳使用实例代码
2008/06/07 PHP
PHP JS Ip地址及域名格式检测代码
2013/09/27 PHP
比较简单的一个符合web标准的JS调用flash方法
2007/11/29 Javascript
JavaScript 创建对象和构造类实现代码
2009/07/30 Javascript
Javascript 命名空间模式
2013/11/01 Javascript
使图片旋转的3种解决方案
2013/11/21 Javascript
如何在JavaScript中实现私有属性的写类方式(一)
2013/12/04 Javascript
js(JavaScript)实现TAB标签切换效果的简单实例
2014/02/26 Javascript
jQuery悬停文字提示框插件jquery.tooltipster.js用法示例【附demo源码下载】
2016/07/19 Javascript
通过BootStrap实现轮播图的实际应用
2016/09/26 Javascript
angularjs实现对表单输入改变的监控(ng-change和watch两种方式)
2018/08/29 Javascript
基于Nodejs的Tcp封包和解包的理解
2018/09/19 NodeJs
Vue发布订阅模式实现过程图解
2020/04/30 Javascript
[03:42]2018完美盛典-《加冕》
2018/12/16 DOTA
[04:05]TI9战队采访 - Natus Vincere
2019/08/22 DOTA
python通过pil模块获得图片exif信息的方法
2015/03/16 Python
使用python中的in ,not in来检查元素是不是在列表中的方法
2018/07/06 Python
零基础使用Python读写处理Excel表格的方法
2019/05/02 Python
Pycharm中出现ImportError:DLL load failed:找不到指定模块的解决方法
2019/09/17 Python
python实现串口通信的示例代码
2020/02/10 Python
CSS3实现粒子旋转伸缩加载动画
2016/04/22 HTML / CSS
Skyscanner台湾:全球知名的旅行比价引擎
2018/07/01 全球购物
最新销售员个人自荐信
2013/09/21 职场文书
最新计算机专业自荐信
2013/10/16 职场文书
经济担保书范文
2014/04/02 职场文书
节能减排倡议书
2014/04/15 职场文书
2014离婚协议书范文
2014/09/10 职场文书
2015教师见习期工作总结
2014/12/12 职场文书
2014年小学少先队工作总结
2014/12/18 职场文书
2015廉洁自律个人总结
2015/02/14 职场文书
幼儿园安全工作总结2015
2015/04/20 职场文书
捐款通知怎么写
2015/04/24 职场文书
2016年法制宣传月活动总结
2016/04/01 职场文书
pytorch 如何使用batch训练lstm网络
2021/05/28 Python
pycharm代码删除恢复的方法
2021/06/26 Python