節(jié)流（時間戳）：一個函數執(zhí)行一次后，只有大于設定的時間南吮，才會執(zhí)行第二次辱姨。
//防抖
// triggerNow 是否立即觸發(fā)
function debounce(fn, time, triggerNow) {
var t = null
var debounced = function() {
var _self = this,
args = arguments;
if (t) {
clearTimeout(t)
}
if (triggerNow) {
var exec = !t
t = setTimeout(function() {
t = null
}, time)
if (exec) {
fn.apply(_self, args)
} else {
t = setTimeout(function() {
fn.apply(_self, args)
}, time)
}
}
}
debounced.remove = function() {
clearTimeout(t)
t = null
}
return debounced
}
防抖（定時器）：頻繁的觸發(fā)函數，在規(guī)定的時間最后一次生效前面的不生效振诬。（延遲執(zhí)行）
//節(jié)流
function throttle(fn, delay) {
var t = null,
begin = new Date().getTime()
return function() {
var _self = this,
args = arguments,
cur = new Date().getTime();
clearTimeout(t);
if (cur - begin >= delay) {
fn.apply(_self, args)
begin = cur
} else {
t = setTimeout(function() {
fn.apply(_self, args)
}, delay)
}
}
}
vue3自定義
應用場景
防抖(debounce)
search搜索蹭睡，用戶在不斷輸入值時，用防抖來節(jié)約請求資源赶么。window觸發(fā)resize的時候棠笑，不斷的調整瀏覽器窗口大小會不斷的觸發(fā)這個事件，用防抖來讓其只觸發(fā)一次
節(jié)流(throttle)
鼠標不斷點擊觸發(fā)禽绪，mousedown(單位時間內只觸發(fā)一次)監(jiān)聽滾動事件蓖救，比如是否滑到底部自動加載更多，用throttle來判斷
按鈕只能點擊一次的做法
為了防止用戶連續(xù)點擊一個按鈕而導致代碼處理錯亂印屁，可參考以下代碼為按鈕上鎖：
var feedbtnlock = 0;
if (feedbtnlock == 0) {
feedbtnlock = 1;
setTimeout(function(){
feedbtnlock = 0;
}, 1500);
} else {
ui.error('請勿重復點擊按鈕循捺！');
return false;
}
feedbtnlock初始值為0，點擊按鈕后雄人，將值設置為1,在1.5秒之后值會恢復為0从橘，如果1.5秒之內
再次點擊按鈕，則會執(zhí)行else語句塊里面的代碼 return false.
自定義指令
一础钠、新建plugins.js
import Vue from 'vue'
// 在vue上掛載一個指量 preventReClick
const preventReClick = Vue.directive('preventReClick', {
inserted: function (el, binding) {
console.log(el.disabled)
el.addEventListener('click', () => {
if (!el.disabled) {
el.disabled = true
setTimeout(() => {
el.disabled = false
}, binding.value || 3000)
//binding.value可以自行設置恰力。如果設置了則跟著設置的時間走
//例如：v-preventReClick='500'
}
})
}
});
export { preventReClick }
二、在main.js中引入
import preventReClick from './utils/plugins.js'
三旗吁、設置button重復點擊
<Button v-if="isVerificate" type="primary" @click="getCode" v-preventReClick>獲取驗證碼</Button>
防抖與節(jié)流
在前端開發(fā)的過程中踩萎，我們經常會需要綁定一些持續(xù)觸發(fā)的事件，如 resize、scroll月培、mousemove 等等，但有些時候我們并不希望在事件持續(xù)觸發(fā)的過程中那么頻繁地去執(zhí)行函數鸦致。這時候就用到防抖與節(jié)流企孩。微信搜索公眾號：Java項目精選锭碳，回復：java 領取資料 。
案例 1：遠程搜索時需要通過接口動態(tài)的獲取數據勿璃，若是每次用戶輸入都接口請求擒抛，是浪費帶寬和性能的。
<Select :remote-method="remoteMethod">
<Option v-for="item in temoteList" :value="item.value" :key="item.id">{{item.label}}</Option>
</Select>
<script>
function debounce(fn, wait) {
let timeout = null
return function () {
if (timeout !== null) clearTimeout(timeout)
timeout = setTimeout(fn, wait)
}
}
export default {
methods：{
remoteMethod：debounce(function (query) {
// to do ...
}, 200),
}
}
<script>
案例 2：持續(xù)觸發(fā) scroll 事件時补疑，并不立即執(zhí)行 handle 函數歧沪，當 1000 毫秒內沒有觸發(fā) scroll 事件時，才會延時觸發(fā)一次 handle 函數癣丧。
function debounce(fn, wait) {
let timeout = null
return function () {
if (timeout !== null) clearTimeout(timeout)
timeout = setTimeout(fn, wait)
}
}
function handle() {
console.log(Math.random())
}
window.addEventListener('scroll', debounce(handle, 1000))
