什么是防抖与节流
1.防抖
在高频率点击时固定时间内只触发一次,每次点击时都会取消之前的延时调用
2.节流
在高频率点击时固定时间每次触发事件时设置一个延迟调用方法,每次点击时都会取消之前的延时调用
在文件utils中新建js文件
防抖代码
/**
函数防抖
fn 目标函数
wait 延迟执行毫秒数
immediately true - 立即执行, false - 延迟执行
*/
export const debounce = function(fn, wait = 1000, immediately = true) {
let timer;
return function() {
let that = this,
args = arguments;
if (timer) clearTimeout(timer);
if (immediately) {
let callNow = !timer;
timer = setTimeout(() => {
timer = null;
}, wait);
if (callNow) fn.apply(that, args);
} else {
timer = setTimeout(() => {
fn.apply(that, args);
}, wait)
}
}
}
节流代码
/**
函数节流
fn 函数
wait 延迟执行毫秒数
type 1 使用表时间戳,在时间段开始的时候触发 2 使用表定时器,在时间段结束的时候触发
*/
export const throttle = (fn, wait = 1000, type = 1) => {
let previous = 0;
let timeout;
return function() {
let that = this;
let args = arguments;
if (type === 1) {
let now = Date.now();
if (now - previous > wait) {
fn.apply(that, args);
previous = now;
}
} else if (type === 2) {
if (!timeout) {
timeout = setTimeout(() => {
timeout = null;
fn.apply(that, args)
}, wait)
}
}
}
}
页面中使用
//先引入
import {debounce} from '@/utils/xxx.js'
//方法中使用
methods: {
你定义的事件名:debounce(()=>{
//你的代码逻辑
}),
}
复制粘贴拿去用吧, 万变不离其中