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 来创建一个响应式对象,这样才能在值变化时触发相应的操作。

在这里插入图片描述

Logo

魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。

更多推荐