最新封裝了一個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:?指定 ...

總結

以上是生活随笔為你收集整理的vue 接口节流_vue防抖节流之v-debounce--throttle使用指南的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。