1.vue 封装utils.js

/**
* @param {function} func 执行函数
* @param {number} time 防抖节流时间
* @param {boolean} isDebounce [1,3]为防抖组件,[2]为节流组件
* @param {this} ctx this 的指向
*/
const debounce = (func, time, isDebounce, ctx) => {
var timer, lastCall, rtn;
// 防抖函数
if (isDebounce == 1) {
rtn = (...params) => {
if (timer) clearTimeout(timer);
timer = setTimeout(() => {
func.apply(ctx, params);
}, time);
};
} else if(isDebounce == 2){ // 节流函数
rtn = (...params) => {
const now = new Date().getTime();
if (now - lastCall < time && lastCall) return;
lastCall = now;
func.apply(ctx, params);
};
} else if(isDebounce == 3){ // 立即执行的防抖函数
rtn = (...params) => {
if (timer) clearTimeout(timer);
let callNow = !timer;
timer = setTimeout(() => {
timer = null;
}, time)
if (callNow) func.apply(ctx, params)
};
}
return rtn;
}; export default {
name: 'Debounce',
abstract: true,
props: {
time: {
type: Number,
default: 800,
},
events: {
type: String,
default: 'click',
},
isDebounce: {
type: Number,
default: 1,
},
},
created() {
this.eventKeys = this.events.split(','); // 分隔事件
this.originMap = {}; // 储存事件,用于重新render时与子事件的对比
this.debouncedMap = {}; // 储存防抖节流事件
},
render() {
const vnode = this.$slots.default[0];
this.eventKeys.forEach(key => {
const target = vnode.data.on[key];
if (target === this.originMap[key] && this.debouncedMap[key]) {
vnode.data.on[key] = this.debouncedMap[key];
} else if (target) {
this.originMap[key] = target;
this.debouncedMap[key] = debounce(
target,
this.time,
this.isDebounce,
vnode
);
vnode.data.on[key] = this.debouncedMap[key]; // 重写子组件的事件
}
});
return vnode;
},
};

  

 
 
 
2.在main.js入口文件里面全局注册

 // 防抖节流
import Debounce from './assets/componentFn/utils' Vue.component('Debounce',Debounce)
 
 
 
 
 
3.使用方法

<!--当是isDebounce==1时表示是防抖函数,isDebounce==2是节流函数,isDebounce==3是立即执行版防抖函数,time是执行时间间隔,UI框架click事件失效时可用修饰符native-->
<Debounce :time='1000' :isDebounce="3">
<Button type="warning" @click.native='btn'>btn</Button>
</Debounce>

  

 
 
4.参考网址:
 

vue防抖节流函数---组件封装,防止按钮多次点击的更多相关文章

  1. vue 防抖节流函数——组件封装

    防抖(debounce) 所谓防抖,就是指触发事件后在 n 秒内函数只能执行一次,如果在 n 秒内又触发了事件,则会重新计算函数执行时间. 节流(throttle) 所谓节流,就是指连续触发事件但是在 ...

  2. vue防抖节流之v-debounce--throttle使用指南

    最新封装了一个vue防抖节流自定义指令,发布到npm上,有用欢迎star,谢谢! npm地址:https://www.npmjs.com/package/v-debounce-throttle git ...

  3. v-debounce-throttle是一个vue防抖节流指令

    v-debounce-throttle是一个vue防抖节流指令 简介 v-debounce-throttle是一个vue防抖节流指令,控制单一事件的触发频率.其核心是拦截组件元素的v-on绑定事件,采 ...

  4. JavaScript防抖节流函数

    1.直接上码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <ti ...

  5. JS基石之-----防抖节流函数

    防抖和节流函数   阅读目录 一 .防抖函数 二 .节流函数 三 .个人理解两者的区别   一.防抖函数 1.1 概念: 触发高频事件后n秒内函数只会执行一次,如果n秒内高频事件再次被触发,则重新计算 ...

  6. vue+element ui table组件封装,使用render渲染

    后台管理经常会用到表格,一开始封装了一个常用的功能性表格,点击这里: 后来由于需求增加,在表格中还会用到switch,select,input等多种组件,每次都要在html中增加<el-tabl ...

  7. js 防抖 节流 JavaScript

    实际工作中,通过监听某些事件,如scroll事件检测滚动位置,根据滚动位置显示返回顶部按钮:如resize事件,对某些自适应页面调整DOM的渲染:如keyup事件,监听文字输入并调用接口进行模糊匹配等 ...

  8. 【跟着大佬学JavaScript】之lodash防抖节流合并

    前言 前面已经对防抖和节流有了介绍,这篇主要看lodash是如何将防抖和节流合并成一个函数的. 初衷是深入lodash,学习它内部的好代码并应用,同时也加深节流防抖的理解.这里会先从防抖开始一步步往后 ...

  9. 函数防抖节流的理解及在Vue中的应用

    防抖和节流的目的都是为了减少不必要的计算,不浪费资源,只在适合的时候再进行触发计算. 一.函数防抖 定义 在事件被触发n秒后再执行回调,如果在这n秒内又被触发,则重新计时:典型的案例就是输入搜索:输入 ...

随机推荐

  1. linux运维、架构之路-Git+Jenkins实现自动化部署

    一.Jenkins介绍          jenkins是一个用JAVA编写的开源的持续集成工具,运行在servlet容器中,支持软件配置管理(SCM)工具,可以执行基于APACHE ANT和APAC ...

  2. Linux常用命令学习记录

    兄弟连Linux培训 ,小编整理了常用的Linux学习命令: 1 cp 拷贝命令 参数:-p 文件属性一起拷贝 -r 拷贝文件夹 -d 软链信息等一起拷贝 -a 是-rdp的简写 2 find 文件查 ...

  3. [转]SpeedPHP微信接口扩展

    这个扩展实现了SP和微信公众平台的对接,1.0版暂时只实现了最简单的功能:绑定,收信息,回复信息. 扩展配置方法: $spConfig = array(     'mode' => 'debug ...

  4. 重新理解了重定向,利用重定向可以防止用户重复提交表单(兼谈springmvc重定向操作)

    自己用springmvc框架有一段时间了,但是都还一直分不清楚什么时候应该用转发,什么时候应该用重定向.可能用转发的情形太多了,以致于自己都忘记了还有重定向. 当用户提交post请求之后,刷新页面就会 ...

  5. 大牛整理最全Python零基础入门学习资料

    大牛整理最全Python零基础入门学习资料 发布时间:『 2017-11-12 11:56 』     帖子类别:『人工智能』  阅读次数:3504 (本文『大牛整理最全Python零基础入门学习资料 ...

  6. textarea组件

    textarea组件:多行输入框:(文本域) textarea组件属性: value:类型 字符串 输入框的内容 placeholder:类型 字符串 输入框为空时的占位符 placeholder-s ...

  7. kubernetes-helm程序包管理器(二十)

    helm概述 Helm是Kubernetes的包管理器,Helm 让我们能够像 yum 管理 rpm 包那样安装.部署.升级和删除容器化应用. Helm的核心术语: Chart:一个helm程序包,是 ...

  8. leetcode-mid-Linked list- 116. Populating Next Right Pointers in Each Node

    mycode   93.97% """ # Definition for a Node. class Node(object): def __init__(self, v ...

  9. python curl_get-pip.py Installing with get-pip.py

    w curl https://bootstrap.pypa.io/get-pip.py > curl_get-pip.pypython curl_get-pip.py https://pip.p ...

  10. Ajax的封装。

    封装 Ajax 因为Ajax 使用起来比较麻烦,主要就是参数问题,比如到底使用GET 还是POST:到 底是使用同步还是异步等等,我们需要封装一个Ajax 函数,来方便我们调用.    封装支持接收来 ...