欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

防抖和节流解析,并且在vue中的应用

程序员文章站 2022-07-03 21:35:48
防抖(debounce) 所谓防抖,就是指触发事件后在 n 秒内函数只能执行一次,如果在 n 秒内又触发了事件,则会重新计算函数执行时间。简单来说就是*防止重复点击触发事件* ***代码实现要点:设置一个定时器,通过闭包,抓住定时器变量,控制定时器的添加和清除 防抖函数分为非立即执行版和立即执行版 非立即执行版的意思是触发事件后函数不会立即执行,而是在 n 秒后执行,如果在 n 秒内又触发了事件,则会重新计算函数执行时间。 立即执行版的意思......

防抖(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