Video by Abbat Studio on Pexels
398 字
2 分钟
vue 中使用节流和防抖
本文同步自 CSDN · 清阿哥,原文发布于 2021-04-22。
今天事情比较少,就特意研究了下在vue中如何使用节流和防抖,还有节流防抖我真的是傻傻的分不清楚,不知道什么时候使用节流,什么时候使用防抖…
1. 节流-方法1
在 utils.js 文件里面加入下面的方法
// 节流export function _throttle(fn, wait = 200) { let last, timer,now; return function() { now = Date.now(); if (last && now - last < wait) { clearTimeout(timer); timer = setTimeout(function() { last = now; fn.call(this, ...arguments); }, wait); } else { last = now; fn.call(this, ...arguments); } };}2. 防抖
// 防抖export function _debounce(fn, wait = 200) { let timer; return function () { let context = this; let args = arguments; if (timer) clearTimeout(timer); timer = setTimeout(() => { fn.apply(context, args); }, wait) }}3. 组件中使用
import { _debounce, _throttle } from '@/assets/scripts/utils';
initQuery: _throttle(function() { // 要做的事情}, 2000)
initQuery: _debounce(function() { // 要做的事情}, 2000)防抖:触发高频事件后n秒内函数只会执行一次,如果n秒内高频事件再次被触发,则重新计算时间。
应用:因为防抖的特性,一直执行最后一次的触发,所以可以用于鼠标移动确定最后一次移动的时候的坐标位置。
输入框的模糊搜索
节流:高频事件触发,但在n秒内只会执行一次,所以节流会稀释函数的执行频率
应用:因为节流是监听到第一次触发事件后就执行,所以可以用来防止按钮多次点击执行多次,且按照第一次点击的事件为准

评论 待开启
评论基于 GitHub Discussions(Giscus)。仓库推送并开启 Discussions 后,在 giscus.app 获取
repoId/categoryId,填入src/config.ts的giscusConfig即可。HHQ-666/qingge-blog