防抖和节流解析,并且在vue中的应用
防抖(debounce)
所谓防抖,就是指触发事件后在 n 秒内函数只能执行一次,如果在 n 秒内又触发了事件,则会重新计算函数执行时间。简单来说就是*防止重复点击触发事件*
***代码实现要点:设置一个定时器,通过闭包,抓住定时器变量,控制定时器的添加和清除
防抖函数分为非立即执行版和立即执行版
非立即执行版的意思是触发事件后函数不会立即执行,而是在 n 秒后执行,如果在 n 秒内又触发了事件,则会重新计算函数执行时间。
立即执行版的意思是触发事件后函数会立即执行,然后 n 秒内不触发事件才能继续执行函数的效果。
*使用场景:监听滚动、点赞功能
节流(throttle)
所谓节流,就是指连续触发事件 但是在 n 秒中只触发执行一次函数。节流会稀释函数的执行频率。简单来说就是*指定时间间隔内只会执行一次任务*
**举例:大家都玩过FPS游戏吧(没玩过???打枪知道了吧!)道具的射速是一定的,不会因为你点击鼠标的速度加快而增加。
***代码实现要点:通过一个布尔变量作为状态,判断代码是否需要执行
*使用场景:图片懒加载监听页面的scoll事件,或者监听鼠标的mousemove事件
****如何在vue中使用:
1.在公共方法中(如 public.js 中),加入函数防抖和节流方法
2.在需要使用的组件引用 :import { _debounce } from "@/utils/public";
3.在 methods 中使用 :
methods: {
changefield: _debounce(function(_type, index, item) {
// 代码
}, 200)
}
本文地址:https://blog.csdn.net/KeepSober_D/article/details/107492664