保姆级在vue3中使用防抖Debounce和节流（Throttle）自定义函数(简单版本) |
您所在的位置：网站首页 › 公司节流应该怎么做 › 保姆级在vue3中使用防抖Debounce和节流（Throttle）自定义函数(简单版本) |
保姆级在vue3中使用防抖Debounce和节流（Throttle）自定义函数(简单版本)
防抖（Debounce）
防抖是指在一定时间内只执行一次函数，如果在这段时间内再次触发，那么会重新计算执行时间。常用于如输入框实时搜索以及点赞评分等场景，避免短时间内多次触发事件导致性能问题，（请记住防抖是最后一次提交） 例如简单的点击按钮，设置一定时间在执行此函数 {{ sum }} 防抖调用方法一： import { debounce } from '@/utils/debounce.js' //方法一 const sum = ref(100) const handleSum = debounce(() => { addSum() }, 5000，false) const addSum = () => { sum.value++ }把以下代码放入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）节流是指在一定时间内只允许函数执行一次，无论触发多少次事件，函数都只在规定的时间间隔内执行一次。常用于如滚动事件、提交保存等，确保某些操作不会过于频繁。（请记住是第一时间调用在规定时间不会调用） {{ num }} 节流调用方法二： import { throttle } from '@/utils/throttle.js' //方法二 const num = ref(20) const addNum = () => { num.value++ } const handleSim = throttle(addNum, 5000)把以下代码放入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, }简单的节流完成了。 防抖和节流调用方法是一样的，只不过写法不一样，个人喜欢那种写那种
|
【本文地址】
今日新闻 |
推荐新闻 |