39 lines
1.1 KiB
TypeScript
39 lines
1.1 KiB
TypeScript
|
/*
|
|||
|
|
需求：防止按钮在短时间内被多次点击，使用节流函数限制规定时间内只能点击一次。
|
|||
|
|
节流就是N秒内只执行一次，不管在N秒内重复调用了多少次，也只执行一次。
|
|||
|
|
思路：
|
|||
|
|
1、第一次点击，立即调用方法并禁用按钮，等延迟结束再次激活按钮
|
|||
|
|
2、将需要触发的方法绑定在指令上
|
|||
|
|
|
|||
|
|
使用：给 Dom 加上 v-throttle 及回调函数即可
|
|||
|
|
<el-button type="danger" icon="refresh" plain v-throttle="resetSearch">重置</el-button>
|
|||
|
|
*/
|
|||
|
|
// @ts-nocheck
|
|||
|
|
import type { Directive, DirectiveBinding } from "vue";
|
|||
|
|
interface ElType extends HTMLElement {
|
|||
|
|
handleClick: () => any;
|
|||
|
|
disabled: boolean;
|
|||
|
|
}
|
|||
|
|
const throttle: Directive = {
|
|||
|
|
mounted(el: ElType, binding: DirectiveBinding) {
|
|||
|
|
let timer = null;
|
|||
|
|
const delay = parseInt(binding.arg) || 500;
|
|||
|
|
const handler = binding.value;
|
|||
|
|
let lastExecTime = 0;
|
|||
|
|
|
|||
|
|
el.addEventListener(
|
|||
|
|
"click",
|
|||
|
|
() => {
|
|||
|
|
const now = Date.now();
|
|||
|
|
if (now - lastExecTime > delay) {
|
|||
|
|
handler();
|
|||
|
|
lastExecTime = now;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
{ passive: false }
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
export default throttle;
|