Vue2版本
// 防抖
// <el-button v-debounce="[reset,'click',300]" ></el-button>
// <el-button v-debounce="[reset]" ></el-button>
Vue.directive('debounce', {
? inserted: function (el, binding) {
? ? let [fn, event = "click", time = 300] = binding.value
? ? let timer
? ? el.addEventListener(event, () => {
? ? ? timer && clearTimeout(timer)
? ? ? timer = setTimeout(() => fn(), time)
? ? })
? }
})
// 節流
// <el-button v-debounce="[reset,'click',300]" ></el-button>
// <el-button v-debounce="[reset]" ></el-button>
Vue.directive('throttle', {
? inserted: function (el, binding) {
? ? let [fn, event = 'click', time = 300] = binding.value
? ? let timer, timer_end;
? ? el.addEventListener(event, () => {
? ? ? if (timer) {
? ? ? ? clearTimeout(timer_end);
? ? ? ? return timer_end = setTimeout(() => fn(), time);
? ? ? }
? ? ? fn();
? ? ? timer = setTimeout(() => timer = null, time)
? ? })
? }
})
Vue3版本
// 防抖指令
app.directive('debounce', { beforeMount(el, binding) {
let [fn, event = 'click', time = 300] = binding.value;
let timer;
el.addEventListener(event, () => {
if (timer) clearTimeout(timer); timer = setTimeout(() => fn(), time); }); } });
// 節流指令
app.directive('throttle', { beforeMount(el, binding) {
let [fn, event = 'click', time = 300] = binding.value;
let timer, timer_end;
el.addEventListener(event, () => {
if (timer) { clearTimeout(timer_end); return timer_end = setTimeout(() => fn(), time); } fn(); timer = setTimeout(() => timer = null, time); }); } });
