前言
学过JavaScript的一些高级应用的同学,想必不会对JavaScript中的事件节流和防抖动陌生。我想应该都能随手甩出一段JavaScript代码实现节流和防抖动。但是,在实际开发中,写原生的JavaScript代码肯定是不会适应开发需求的。接下来,我们以Vue.js中如何很方便地使用事件节流和防抖动为例,在实际开发中运用一下~
事件节流(throttle)
事件节流则是指让事件在指定的一段时间内触发,且每次触发事件都会在这段时间的起始时间点开始执行,之后在这段时间内不会触发该事件。那么如何在Vue中方便的使用事件节流?
1. 定义事件节流函数
// 事件节流
export function throttle(fn, time) {
let timer = null, context = this // 用于存储计时器
return function () {
if (!timer) { // 如果此时不存在计时器
let arg = arguments
fn.apply(context, arg) // 调用事件
timer = setTimeout(() => { // 开启计时器
// timer秒后
// 清除计时器
clearTimeout(timer)
timer = null
}, time)
}
}
}
2. 全局注册指令
Vue.directive('throttle', {
bind(el, binding) {
let executeFunction
if (binding.value instanceof Array) {
const [func, timer] = binding.value;
executeFunction = throttle(func, timer);
} else {
console.error(`throttle指令绑定的参数必须是数组,且需执行的事件类型或函数或时间间隔不能为空`)
return
}
el.addEventListener('click', executeFunction);
}
})
3. main.js中引入
import './directives'
4. 页面中使用
<template>
<div>
<button v-throttle="[() => { callBack('wjc') }, 3000]">click me! throttle</button>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
props: {
msg: String
},
methods: {
callBack(name) {
console.log(`my name is ${name}`)
}
}
}
</script>
事件防抖动(debounce)
事件防抖动也是在指定的一段时间内触发,不同于事件节流的是它在这段时间结束时触发,在这个时间点结束之前该事件不会触发。
事件抖动函数定义
// 事件防抖动
export function debounce(fn, delay) {
let timer = null, context = this
return function() {
if (!timer) {
let arg = arguments
timer = setTimeout(() => {
fn.apply(context, arg)
clearTimeout(timer)
timer = null;
}, delay)
}
};
}
PS:指令注册使用方式同上。