在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之解决IE下不渲染的bug
Jun 29 Javascript
javascript 面向对象思想 附源码
Jul 07 Javascript
JavaScript实现快速排序(自已编写)
Dec 19 Javascript
avalonjs制作响应式瀑布流特效
May 06 Javascript
angularjs表格分页功能详解
Jan 21 Javascript
BootStrap Validator对于隐藏域验证和程序赋值即时验证的问题浅析
Dec 01 Javascript
原生js实现弹出层效果
Jan 20 Javascript
fullCalendar中文API官方文档
Feb 07 Javascript
jQuery validate 验证radio实例
Mar 01 Javascript
JS中比Switch...Case更优雅的多条件判断写法
Sep 05 Javascript
JavaScript实现拖拽和缩放效果
Aug 24 Javascript
关于JS中的作用域中的问题思考分享
Apr 06 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
一个简单的php实现的MySQL数据浏览器
2007/03/11 PHP
用JavaScript 处理 URL 的两个函数代码
2007/08/13 Javascript
js window.onload 加载多个函数的方法
2009/11/02 Javascript
使用Json比用string返回数据更友好,也更面向对象一些
2011/09/13 Javascript
Javascript面向对象编程
2012/03/18 Javascript
基于jQuery实现的图片切换焦点图整理
2014/12/07 Javascript
JavaScript中的Object对象学习教程
2016/05/20 Javascript
浅析JSONP技术原理及实现
2016/06/08 Javascript
Jil,高效的json序列化和反序列化库
2017/02/15 Javascript
使用vue.js写一个tab选项卡效果
2017/03/25 Javascript
微信小程序 flex实现导航实例详解
2017/04/26 Javascript
node.js 中间件express-session使用详解
2017/05/20 Javascript
vue中的provide/inject的学习使用
2018/05/09 Javascript
echarts同一页面中四个图表切换的js数据交互方法示例
2018/07/03 Javascript
详解webpack自定义loader初探
2018/08/29 Javascript
vue form 表单提交后刷新页面的方法
2018/09/04 Javascript
vue-router命名路由和编程式路由传参讲解
2019/01/19 Javascript
如何在微信小程序中实现Mixins方案
2019/06/20 Javascript
详解Nuxt.js 实战集锦
2019/11/19 Javascript
一文带你了解Python中的字符串是什么
2018/11/20 Python
使用TensorFlow对图像进行随机旋转的实现示例
2020/01/20 Python
python爬虫中url管理器去重操作实例
2020/11/30 Python
python 实现客户端与服务端的通信
2020/12/23 Python
canvas使用注意点总结
2013/07/19 HTML / CSS
WatchShop法国:英国排名第一的独立手表零售商
2020/02/17 全球购物
新闻专业毕业生英文求职信
2014/03/19 职场文书
领导干部廉政承诺书
2014/03/27 职场文书
三方协议书范本
2014/04/22 职场文书
缅怀革命先烈演讲稿
2014/05/14 职场文书
教师职业道德事迹材料
2014/08/18 职场文书
先进单位申报材料
2014/12/25 职场文书
追悼会悼词大全
2015/06/23 职场文书
《分一些蚊子进来》读后感3篇
2020/01/09 职场文书
Vue实现tab导航栏并支持左右滑动功能
2021/06/28 Vue.js
python函数的两种嵌套方法使用
2022/04/02 Python
深入理解 Golang 的字符串
2022/05/04 Golang