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毫秒后执行后续处理:而其他事件大多的 ...
随机推荐
- JAVA程序通过JNI调用C/C++库
java程序如何调用c/c++库中的函数主要分为三个步骤: 1. 加载库文件. System.loadLibrary 2. 找到函数( java函数<----映射---->c函数 ) 3. ...
- [linux]makefile多目录
在使用makefile多目录编写前需要掌握几个函数及符号 自定义变量 target=edit 引用的时候直接使用 $(target) 有点像C语言中的#define,这里的 $(target)会被替换 ...
- BCC和libbpf的转换
BCC和libbpf的转换 本文讲述如何将基于BCC的BPF应用转换为libbpf + BPF CO-RE.BPF CO-RE可以参见上一篇博文. 为什么是libbpf和BPF CO-RE? 历史上, ...
- UML第二次结对作业
|作业要求|https://edu.cnblogs.com/campus/fzzcxy/2018SE1/homework/11250| | ---------- | ----------------- ...
- kubectl常用命令(个人记录)
一.获取pod信息 1.获取当前集群运行的所有的pods的信息 kubectl get pod 2.获取当前集群运行的所有的pod运行在哪个节点 kubectl get pods -owide ...
- Django(投票程序)
Django是一个web框架,python编写的. MTV模式 Django的MTV模式本质上和MVC是一样的,也是为了各组件间保持松耦合关系,只是定义上有些许不同 -M代表模型(Model ):负责 ...
- HP PROLIANT DL388 GEN10 (故障3019)SPP损坏
HP PROLIANT DL388 GEN10 (故障3019)SPP损坏 1. 开机硬件自检,提示错误ERROR 3019: 2. 根据服务器版本GEN10下载最新固件SPP,可找服务商或者HP售后 ...
- 解决Establishing SSL connection without server‘s identity verification is not recommended.
每次从数据库中进行查询或者其他操作控制台都会出现以下警告,虽说不是error,但是很显眼.. WARN: Establishing SSL connection without server's id ...
- windows鼠标右键添加快捷方式
[win]+[R] 输入regedit 打开路径:计算机\HKEY_CLASSES_ROOT\DesktopBackground\Shell 创建应用文件,这里以putty为例 右键 Shell 新建 ...
- 【Linux】实现端口转发的rinetd
Linux下端口转发一般都使用iptables来实现,使用iptables可以很容易将TCP和UDP端口从防火墙转发到内部主机上.但是如果需要将流量从专用地址转发到不在您当前网络上的机器上,可尝试另一 ...