lodash防抖节流

简介: lodash防抖节流

应用场景:

当用户高频率的触发事件,事件较短,内部出现卡顿现象


解决方法:

防抖节流

防抖节流功作用:

主要目的是为了降低高频事件触发,减少dom操作或请求次数,提升性能

防抖函数debounce


使用的原理:前面所有的触发,是最后一次执行后在规定的时间内触发(只执行一次)

n 秒后在执行该事件,若在 n 秒内被重复触发,则重新计时


举例:

假设电梯有两种运行策略 debounce 和 throttle,超时设定为15秒,不考虑容量限制电梯第一个人进来后,等待15秒。如果过程中又有人进来,15秒等待重新计时,直到15秒后开始运送,这是防抖

节流函数throttle

使用原理:少量的触发,在规定的时间内是不会重复触发的,只有超过这个事件才会再次的触发

n 秒内只运行一次,若在 n 秒内重复触发,只有一次生效


举例:

假设电梯有两种运行策略 debounce 和 throttle,超时设定为15秒,不考虑容量限制

电梯第一个人进来后,15秒后准时运送一次,这是节流

使用方式:

使用lodash插件,安装lodash插件

npm i lodash


引入

import _ from 'lodash'


节流

this.right=_.throttle(this.right,1000)


防抖

this.left=_.debounce(this.left,1000)
相关文章
lodash函数节流
lodash函数节流
572 0
uniapp 实现加载效果,消息提示框,模态框
uniapp 实现加载效果,消息提示框,模态框
834 0
|
安全 数据库 数据安全/隐私保护
|
8月前
|
自然语言处理 Prometheus 监控
基于DeepSeek的智能客服系统实战:从开发到部署
本文详细介绍如何将基于DeepSeek的智能客服系统从开发到部署,涵盖服务器选择、环境配置、代码部署及Web服务器设置。通过具体案例和代码示例,讲解系统上线步骤,并介绍使用Prometheus、Grafana等工具进行性能监控的方法。此外,针对高并发、API调用失败等常见问题提供解决方案,确保系统的稳定运行。最后强调数据安全与隐私保护的重要性,帮助读者全面掌握智能客服系统的部署与维护。
|
资源调度 JavaScript
Pinia的数据持久化
Pinia的数据持久化
|
机器学习/深度学习 人工智能 语音技术
情感识别与表达:FunAudioLLM的情感智能技术
【8月更文第28天】随着人工智能的发展,语音交互系统越来越普遍。其中,情感智能技术成为提高用户体验的关键因素之一。本文将探讨 FunAudioLLM 如何利用情感识别和表达技术来增强语音交互的真实感,并提供具体的代码示例。
1208 0
|
数据采集 数据可视化 数据挖掘
Python爬虫之Pandas数据处理技术详解
Python爬虫之Pandas数据处理技术详解
|
Linux 网络安全
Linux(CentOS6.5)开放端口,配置防火墙
Linux(CentOS6.5)开放端口,配置防火墙
432 0
|
Web App开发 前端开发 JavaScript
Web前端性能测试方法
Web前端性能测试方法
422 0