节流(throttle)
在n秒内点击多次,只有一次生效。
<template>
<div>
<button @click="throttle">按钮</button>
</div>
</template>
<script>
//定义
let timer, lastTime;
let now = +new Date();
export default {
methods: {
throttle: () => {
if (lastTime && now - lastTime < 200) {
clearTimeout(timer);
console.log("....");
timer = setTimeout(() => {
console.log("点击...");
lastTime = +new Date();
}, 2000);
} else {
lastTime = now;
timer = setTimeout(() => {
console.log("点击...");
lastTime = +new Date();
}, 200);
}
}
}
};
</script>
效果演示:
补充
当然,也可以对其进行封装,以便复用。
/*
* 函数节流
*/
export const Throttle = (fn, t) => {
let last;
let timer;
let interval = t || 500;
return function () {
let args = arguments;
let now = +new Date();
if (last && now - last < interval) {
clearTimeout(timer);
timer = setTimeout(() => {
last = now;
fn.apply(this, args);
}, interval);
} else {
last = now;
fn.apply(this, args);
}
}
};