1.节流函数
// utils.js
//节流函数
utils.throttle = (fn, delay) => {
let timer = null;
return function (...args) {
if (!timer) {
timer = setTimeout(() => (timer = null), delay);
return fn.apply(this, args);
}
};
};
这个节流函数接受两个参数:要封装的函数 fn 和延迟时间 delay。函数返回一个新的函数,这个新函数在被调用时会检查是否已经存在定时器,如果不存在,就设置一个新的定时器,并调用原始函数。如果已经存在定时器,则不再调用原始函数。
2.在 Vue3 中使用节流函数:
//温度+
const addTemp = proxy.$U.throttle((val, index) => {
console.log(val)
if (val == 34) {
return false;
}
state.airConList[index].acuOutTemp = Number(state.airConList[index].acuOutTemp)
state.airConList[index].acuOutTemp += 1
}, 1000)
3.防抖函数
import {
ref, watchEffect, watch } from 'vue';
function debounce(fn, delay) {
let timeoutId;
return function(...args) {
if (timeoutId) clearTimeout(timeoutId);
timeoutId = setTimeout(() => fn.apply(this, args), delay);
};
}
export default {
setup() {
const inputValue = ref('');
const handleInput = debounce((value) => {
console.log(value); // 处理输入值的逻辑
}, 500);
watchEffect(() => {
handleInput(inputValue.value);
});
return {
inputValue };
}
};
在上面的例子中,我们定义了一个 debounce 函数,这个函数接受一个函数和一个延迟时间作为参数,返回一个新的函数,这个新函数在被调用时会清除之前的定时器,并在延迟时间后执行原始函数。在 setup 函数中,我们创建了一个 inputValue 引用,并定义了一个 handleInput 函数,这个函数被 debounce 包装了一下,用来处理输入值的逻辑。然后我们使用 watchEffect 来监听 inputValue 的变化,并在变化时调用 handleInput 函数。由于 handleInput 函数被 debounce 包装了,所以它只会在输入停止 500 毫秒后被调用一次。
除了使用 watchEffect,也可以使用 watch 来监听某个值的变化。需要注意的是,在 Vue3 中,需要使用 ref 来创建一个响应式对象,这样才能在值变化时触发相应的操作。