防抖:
Vue.directive('debounce', {
inserted: function(el, binding) {
let timer;
el.addEventListener("click", () => {
if (timer) {
clearTimeout(timer);
}
timer = setTimeout(() => {
// 执行函数
binding.value();
}, 500);
});
}
})
节流:
Vue.directive('throttle', {
inserted(el, bind){
el.addEventListener('click', function() {
let isFalse= false
if (!isFalse) {
isFalse = true
el.style.pointerEvents = 'none';
setTimeout(() => {
el.style.pointerEvents = 'auto';
isFalse = false
}, 1000);
}
})
}
})
div经常会被用来做按钮,有时候我们需要禁用按钮,让它不可被点击,一般我们会想到用disabled属性:el.disabled=true来禁用元素,但是这个属性只对button有用,所以我们可以用CSS的pointer-events:none来控制元素是否禁用