Lodash - 使用debounce做事件延遲
文章目錄
前言
這篇也是在IT邦幫忙解決的題目,最初問法是說做一個計時器,結果搞半天不是, 他是想做一個事件延遲3秒再執行才對,而且如果按鈕連續點擊,會以最後一次點擊完3秒後才執行事件。
解決方法
這個其實是我在學Vue.js的過程碰巧看到的函式庫Lodash,它的debounce方法可以延遲執行。
註:debounce可以翻防抖動或防反動都行
程式實作
引用Lodash
引入CDN
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.10/lodash.min.js"></script>
NPM安裝
$ npm i --save lodash
var _ = require('lodash');
建立HTML物件
先做出一個Button
和一個訊息DIV
<button id="showBtn" type="button">顯示訊息</button>
<div id="Message"></div>
建立Debounce事件
寫一個函數顯示訊息,並使用_.debounce()
延遲執行訊息消失事件
var showBtn = document.getElementById('showBtn');
var msg = document.getElementById('Message');
// 消失事件
var hideMsg = function(){
msg.innerHTML = '';
}
// 延遲一秒消失
var debounce = _.debounce(hideMsg, 1000);
建立Button Click
// 點擊事件
showBtn.onclick = function(){
msg.innerHTML = '點擊成功';
debounce();
};
註:如果_.debounce()要放在funtion或變數裡,不然會沒效果
Demo
點完一次一秒會消失,如果一直點的話不會消失,直到停止點擊一秒後才消失。
後記
其實這個還蠻好玩的,只是之前實作的時候是用Vue.js,沒想到直接實作卡那麼久,
原來是_.debounce()
要包在function裡面不然他就不會跑了,就這樣鬼打牆好久,不過有學到東西是最重要的。