挨踢老王
🏃♂️人生之路，难免坎坷，但我执着
网站页面
vue中使用防抖和节流，防止重复点击或重复上拉加载
12/12
防抖和节流是我们在开发过程中常用优化性能的方式。接下来是在vue中怎么使用：
1.在公共方法中（如 util.js 中），加入函数防抖和节流方法
// 防抖:函数防抖就是，延迟一段时间再执行函数，如果这段时间内又触发了该函数，则延迟重新计算（简单来说就是只执行连续点击的最后一次）
export 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);
};
}
// 节流：函数间隔一段时间后才能再触发，避免某些函数触发频率过高，比如滚动条滚动事件触发的函数。
export 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);
}
}
}2.在需要使用的组件引用
import { _debounce,_throttle } from "./../assets/util"; //根据自己项目路径去匹配3.在当前vue页面 methods 中使用
methods: {
cesiBtn: _debounce(function(_type, index, item) {
// do something ...
}, 2000)
}
