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秒内只会执行一次,所以节流会稀释函数的执行频率
应用:因为节流是监听到第一次触发事件后就执行,所以可以用来防止按钮多次点击执行多次,且按照第一次点击的事件为准

vue 中使用节流和防抖
https://qingge-cabana.vercel.app/posts/vue-中使用节流和防抖-116020069/
作者
清阿哥
发布于
2021-04-22
许可协议
CC BY-NC-SA 4.0

评论 待开启

评论基于 GitHub Discussions(Giscus)。仓库推送并开启 Discussions 后,在 giscus.app 获取 repoId / categoryId ,填入 src/config.tsgiscusConfig 即可。

  • 目标仓库: HHQ-666/qingge-blog
  • 详细步骤见项目 docs/DEPLOY.md 第二节