lodash的debounce函数的使用
最新,在react新项目的开发中使用到了lodash类库的debounce方法,就随手梳理了一下此方法的方便之处

未使用debounce之前
如果不考虑使用debounce,那么在用户连续点击的情况之下,会在每一次点击之后就会执行自定义函数的回调,这时如果你的回调中处理一些比较消耗内存的一些操作,或者调用接口之类,那么可能会导致阻塞甚至于项目崩溃。
例如:
window.addEventListener('click', function (event) {
var p = document.createElement('p')
p.innerHTML = 'trigger'
document.body.appendChild(p)
})
此时的每一次点击都会触发dom元素的改变,如果连续点击的情况下后果可想而知
引入debounce
window.addEventListener('click', debounce(function (event) {
var p = document.createElement('p')
p.innerHTML = 'trigger'
document.body.appendChild(p)
return 'aaaa'
}, 500))
这样,即使用户连续点击,那么也只有在最后一次点击的500ms后,真正的函数func才会触发。
这只是对debounce的初步了解,后续更新中
lodash的debounce函数的使用的更多相关文章
- 慎用lodash的cloneDeep函数
lodash的cloneDeep函数能够很方便的拷贝对象,但是一旦拷贝一些很复杂的对象就有可能报错.比如用cloneDeep克隆一个vue实例,就有可能包key.charAt is not a Fun ...
- 如何使用 js 实现一个 debounce 函数
如何使用 js 实现一个 debounce 函数 原理 防抖: 是指在指定的单位时间内,如果重复触发了相同的事件,则取消上一次的事件,重新开始计时! 实现方式 "use strict&quo ...
- 关于Js debounce 函数小结
一.前言 以下场景往往由于事件频繁被触发,因而频繁执行DOM操作.资源加载等重行为,导致UI停顿甚至浏览器崩溃. 1. window对象的resize.scroll事件 2. 拖拽时的mousemov ...
- nodejs lodash的一些函数
1 _.compact用法 _.compact([0, 1, false, 2, '', 3,'mm']); var test = _.compact([-1,0, 1, false, 2, ...
- throttle和debounce函数
控制耗性能的函数,避免浏览器卡死
- Loadsh 常用方法总结以及在vue中使用Loadsh
Loadsh 常用方法总结以及在vue中使用Loadsh Lodash 是一个一致性.模块化.高性能的 JavaScript 实用工具库.处理复杂数组,对比等可以直接采用该库,也方便快捷. 官方网站 ...
- JavaScript 任务池
JavaScript 任务池 本文写于 2022 年 5 月 13 日 线程池 在多线程语言中,我们通常不会随意的在需要启动线程的时候去启动,而是会选择创建一个线程池. 所谓线程池,本意其实就是(不止 ...
- lodash用法系列(3),使用函数
Lodash用来操作对象和集合,比Underscore拥有更多的功能和更好的性能. 官网:https://lodash.com/引用:<script src="//cdnjs.clou ...
- Javascript中 节流函数 throttle 与 防抖函数 debounce
问题的引出 在一些场景往往由于事件频繁被触发,因而频繁地进行DOM操作.资源加载,导致UI停顿甚至浏览器崩溃. 在这样的情况下,我们实际上的需求大多为停止改变大小n毫秒后执行后续处理:而其他事件大多的 ...
随机推荐
- 使用UML工具分析类图与类的关系-bouml(java和C++)
在分析类之间的关系时可以借助工具来实现. bouml是一个UML分析工具,最新的版本是收费的,但是之前的版本是免费的. 这里使用的是4.23版. Bouml安装: 安装软件就按照流程走就行了.但是第一 ...
- C语言全排列
#include <stdio.h> int m=5; char s[]="12345"; void Swap(char *a, char *b)//元素交换 { ch ...
- java有关静态代理及动态代理的实现
引言: 代理是基本的设计模式之一,它为你提供额外的或不同的操作而插入的用来代替实际对象的对象(委托对象).这些对象通常涉及到与实际对象的通信,因此代理通常充当中间人的角色.--JAVA编程思想 相关的 ...
- CSS卡片旋转
html{ perspective: 800px; } body{ display:flex; flex-wrap: wrap; } .card{ transform-style: preserve- ...
- SpringBoot启动报端口已被占用--解决
问题 启动SpringBoot项目后发现启动失败,控制台输出以下内容 Description: The Tomcat connector configured to listen on port 81 ...
- 【.NET 与树莓派】使用 GPIO 库
上回老周在说准备工作的时候,提到过树莓派用金属盒散热的事情.有朋友会说,加了金属盒子接线不方便,就算用了"T"形板,毕竟是把导线延长了的.其实扩展板就是把原有的引脚引出(类似于延长 ...
- 转载 - Ubuntu源改国内源 与 批量更改ubuntu机器apt源
change_apt_source.sh # !/bin/bash # 备份原来的源文件 cp /etc/apt/sources.list /etc/apt/sources.list.bak # 获取 ...
- 腾讯QQ,人人都是高手
今天,腾讯果然给出了官方回应,具体表述如下: 可能你看不太懂,其实我也看的不太懂,不过这就是公关的能力体现,就像我"人人都是高手"的大连车务组微机室小编一样,把一个降级flash描 ...
- 【Linux】Linux进程间通信的几种方式
一.进程间通信的目的 数据传输:一个进程需要将它的数据发送给另一个进程,发送的数据量在一个字节到几M字节之间 共享数据:多个进程要操作共享数据,一个进程对共享数据 信息传递:一个进程需要向另一个进程发 ...
- iptables原理及防火墙规则语法基础
Iptables 防火墙 学习总结: 三张表介绍: filter负责过滤数据包,包括的规则链有,input(进),output(出)和forward(转发); nat则涉及到网络地址转换,包括的规则 ...