最新封装了一个vue防抖节流自定义指令，发布到npm上，有用欢迎star,谢谢！

使用比较简单，取消利用vue注册事件，采用指令来注册事件，防抖指令v-debounce,节流指令v-debounce,使用方式分为两种，传入对象和采用修饰符，具体文档如下：

默认参数：

参数名称

数据类型

必填

默认值

备注

fun

String

true

空

event

String

false

click

args

Any

false

空

wait

Number

false

200

备注：

1、modifiers为指令修饰符，默认与vue事件绑定保持一致，目前支持的事件类型：click,dblclick,keyup,keydown,keypress,mouseup,mousedown,mouseover,mouseleave,scroll，事件修饰符stop =>阻止默认事件，prev =>阻止事件冒泡

2、自定义指令默认通过原生JS注册元素事件，在按钮元素上使用的时候，需要移出通过v-on(@)绑定的事件

3、防抖v-debounce,节流v-throttle

使用示例：

方法1：

v-debounce=”funName”

方法2：

v-debounce=”{fun: ‘xxx’, event: ‘xxx’}”

方法3：

v-debounce.click.stop=’funName’

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

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

vue防抖节流函数---组件封装,防止按钮多次点击

1.vue 封装utils.js /** * @param {function} func 执行函数 * @param {number} time 防抖节流时间 * @param {boolean} ...

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

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

vue 防抖和节流

函数防抖(debounce):当持续触发事件时,一定时间段内没有再触发事件,事件处理函数才会执行一次,如果设定的时间到来之前,又一次触发了事件,就重新开始延时. 函数节流(throttle):当持续触 ...

如何在Vue中优雅的使用防抖节流

1. 什么是防抖节流 防抖:防止重复点击触发事件 首先啥是抖? 抖就是一哆嗦!原本点一下,现在点了3下!不知道老铁脑子是不是很有画面感!哈哈哈哈哈哈 典型应用就是防止用户多次重复点击请求数据. 代码实 ...

JS: 防抖节流

防抖节流 防抖(debounce) 先来看看下面的代码: //触发滚动事件,num 就加1 let num = 0; function incNum() { console.log('鼠标滚动中'); ...

js 防抖 节流 JavaScript

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

Lodash之throttle(节流)与debounce(防抖)总结

全手打原创,转载请标明出处:https://www.cnblogs.com/dreamsqin/p/11305028.html 先重点说一下可能遇到的坑:主要在原本默认参数的设置以及两个方法的选择上, ...

js节流防抖应用场景，以及在vue中节流防抖的具体实现

故事背景: 项目有个需求是输入框在输入的时候进行搜索,展示下拉数据,但是没必要输入一个字都进行搜索,所以想到了在输入结束200毫秒后再进行搜索,从而引出来了 js的节流(throttle),防抖(de ...

随机推荐

JQuery页面加载

第一种: $(document).ready(function(){ alert("第一种方法."); }); 第二种: $(function(){ alert("第二种 ...

ArrayList和LinkedList的几种循环遍历方式及性能对比分析(转)

主要介绍ArrayList和LinkedList这两种list的五种循环遍历方式,各种方式的性能测试对比,根据ArrayList和LinkedList的源码实现分析性能结果,总结结论. 通过本文你可以 ...

ahjesus 捕获entity framework生成的sql语句

网上这方面的资料很少,找到一个可以用的 http://code.msdn.microsoft.com/EFProviderWrappers 里面有dll可以下载,有教程,不过是E文的. 在Entity ...

OC - 4.OC核心语法

一.点语法 1> 基本使用 点语法本质上是set方法/get方法的调用 2> 使用注意 若出现在赋值操作符的右边,在执行时会转换成get方法 若出现在赋值操作符的左边,在执行时会转换成se ...

poj3764(dfs+Trie树+贪心)

题目链接:http://poj.org/problem?id=3764 分析:好题!武森09年的论文中有道题CowXor,求的是线性结构上的,连续序列的异或最大值,用的办法是先预处理出前n项的异或值, ...

Volley的基本使用

Volley的基本使用 导入jar包 导入成功 源码 GET请求下载地址:http://download.csdn.net/detail/q4878802/9053969 POST请求下载地址:htt ...

C# 创建含多层分类标签的Excel图表

相较于数据,图表更能直观的体现数据的变化趋势.在数据表格中,同一数据值,可能同时代表不同的数据分类,表现在图表中则是一个数据体现在多个数据分类标签下.通常生成的图表一般默认只有一种分类标签,下面的方法 ...

Haxe东游记(上)part1.5：roadmap

part1.6 = 常用API参考 1.5.7 -> 官方手册目录/总结/中文化 1.8 -> 官方示例/讲解/总结 1.5.6-> haxe整体结构/解析/综述 part2 = 中 ...

EEG 睡眠 节律 代码

a1=load('EEG01.txt');[c,r]=size(a1);z=10;%等于几,绘图起点从几开始s=256*z;%绘图起点;还有,这里的256是采样率d=floor(c/256);cn=d ...

Oracle DataBase 编码格式

sqlplus 查询 Oracle 数据库结果乱码或显示 ? 则需要设置字符集 一.客户端字符集 格式:NLS_LANG=language_territory.charset Language: 指定 ...