vue+element-自定义指令,防止重复提交及重复发送http请求;节流throttle与防抖debounce举例说明
- 方法一、控制标签
全局directive的写法
// 提交以后禁用按钮一段时间,防止重复提交
import Vue from 'vue';
Vue.directive('noMoreClick', {
inserted(el, binding) {
el.addEventListener('click', e => {
el.classList.add('is-disabled');
el.disabled = true;
setTimeout(() => {
el.disabled = false;
el.classList.remove('is-disabled');
}, 3000)
})
}
});
局部directive的写法
directives:{
noMoreClick: {
inserted(el, binding) {
el.addEventListener('click', () => {
el.classList.add('is-disabled');
el.disabled = true;
setTimeout(() => {
el.disabled = false;
el.classList.remove('is-disabled');
}, 2000)
})
}
}
},
使用:
<el-button size="small" class="clear-btn m-t-sm m-b-sm" @click="resetForm" v-no-more-click>
Confirm
</el-button>
- 方法二、控制JS
使用这个,首先应该对Lodash.js有一定的了解,(打开链接,搜索debounce即可查看相应文档
)
_.debounce(func, [wait=0], [options={}])
创建一个 debounced(防抖动)函数,该函数会从上一次被调用后,延迟 wait
毫秒后调用 func
方法。 debounced(防抖动)函数提供一个 cancel
方法取消延迟的函数调用以及 flush
方法立即调用。 可以提供一个 options(选项) 对象决定如何调用 func
方法,options.leading
与|或 options.trailing
决定延迟前后如何触发(愚人码头注:是 先调用后等待 还是 先等待后调用)。 func
调用时会传入最后一次提供给 debounced(防抖动)函数 的参数。 后续调用的 debounced(防抖动)函数返回是最后一次 func
调用的结果。
methods:{
// 触发事件
clickMe(){
this.getData('111');
},
getData: _.debounce(function(value){
console.log(value);//2秒后打印'111'
},2000)
}
防抖动原理:
- 1、debounce
function debounce(fn,delay){
var delay=delay||200;
var timer;
return function(){
var th=this;
var args=arguments;
if (timer) {
clearTimeout(timer);
}
timer=setTimeout(function () {
timer=null;
fn.apply(th,args);
}, delay);
};
}
我们调用debounce的时候,它运行返回一个function,这个function使用外面的局部变量delay和timer。这个返回的function才是事件执行的回调。每次执行的时候判断timer是否有值,有值则clearTimeout清空定时器,并且重新开启定时器,直到delay时间内没有触发事件时才会真正执行事件的回调。
- 2、throttle实现
function throttle(fn,interval){
var last;
var timer;
var interval=interval||200;
return function(){
var th=this;
var args=arguments;
var now=+new Date();
if(last&&now-last<interval){
clearTimeout(timer);
timer=setTimeout(function(){
last=now;
fn.apply(th,args);
},interval);
}else{
last=now;
fn.apply(th,args);
}
}
}
使用方法跟debounce一样。代码逻辑也类似。在触发时超过间隔时间interval ms则执行。否则不执行。if判断中的setTimeout是保证最后一次事件触发后能够调用,所以每次执行没到间隔时间时先清除timer,再重新启动timer。而在达到间隔时间时执行函数。
- 防抖动与节流的区别
防抖动就是,在多次触发时(不间断点击N秒),点击停止3秒后触发函数 (常用于keydown事件上验证用户名等)
// 函数防抖
let timer = false;
document.getElementById("throttle").onclick = function(){
clearTimeout(timer);
timer = setTimeout(()=>{
console.log("执行买的http请求");
console.log(timer);
},2000)
};
节流是,在多次触发时(不间断点击N秒),每隔3秒触发一次函数,常用于resize改变布局,scroll滚动事件等
// 函数节流
let flag = true;
document.getElementById("throttle").onclick = function(){
console.log("买");
if(!flag){
return
}
flag = false;
setTimeout(()=>{
flag = true;
console.log("执行买的http请求")
},2000)
};
更多推荐
所有评论(0)