防抖(Debounce)
防抖是指在一定时间内只执行一次函数,如果在这段时间内再次触发,那么会重新计算执行时间。常用于如输入框实时搜索以及点赞评分等场景,避免短时间内多次触发事件导致性能问题,(请记住防抖是最后一次提交)
例如简单的点击按钮,设置一定时间在执行此函数
<p>
{{ sum }}
</p>
<van-button type="primary" size="small" @click="handleSum">
防抖
</van-button>
调用方法一:
<script setup>
import { debounce } from '@/utils/debounce.js'
//方法一
const sum = ref(100)
const handleSum = debounce(() => {
addSum()
}, 5000,false)
const addSum = () => {
sum.value++
}
</script>
把以下代码放入debounce.js文件中
// 防抖函数
function debounce(func, wait, immediate) {
console.log('防抖');
let timeout; // 定义一个计时器变量,用于延迟执行函数
return function (...args) { // 返回一个包装后的函数
const context = this; // 保存函数执行上下文对象
const later = function () { // 定义延迟执行的函数
timeout = null; // 清空计时器变量
if (!immediate) func.apply(context, args); // 若非立即执行,则调用待防抖函数
};
const callNow = immediate && !timeout; // 是否立即调用函数的条件
clearTimeout(timeout); // 清空计时器
timeout = setTimeout(later, wait); // 创建新的计时器,延迟执行函数
if (callNow) func.apply(context, args); // 如果满足立即调用条件,则立即执行函数
};
}
export {
debounce,
}
一个简单的防抖就完成了
节流(Throttle)
节流是指在一定时间内只允许函数执行一次,无论触发多少次事件,函数都只在规定的时间间隔内执行一次。常用于如滚动事件、提交保存等,确保某些操作不会过于频繁。(请记住是第一时间调用在规定时间不会调用)
<p>
{{ num }}
</p>
<van-button type="primary" size="small" @click="handleSim">
节流
</van-button>
调用方法二:
<script setup>
import { throttle } from '@/utils/throttle.js'
//方法二
const num = ref(20)
const addNum = () => {
num.value++
}
const handleSim = throttle(addNum, 5000)
</script>
把以下代码放入throttle.js文件中
// 节流函数
function throttle(func, wait) {
let timeout; // 定义一个计时器变量,用于限制函数调用频率
return function (...args) { // 返回一个包装后的函数
const context = this; // 保存函数执行上下文对象
if (!timeout) { // 如果计时器不存在
func.apply(context, args); // 执行函数
timeout = setTimeout(() => {
timeout = null; // 清空计时器变量
}, wait); // 创建计时器,在指定时间后重置计时器变量
}
};
}
export {
throttle,
}
简单的节流完成了。
防抖和节流调用方法是一样的,只不过写法不一样,个人喜欢那种写那种