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毫秒后执行后续处理:而其他事件大多的 ...
随机推荐
- js:表单校验(获取元素、事件)
1.表单校验步骤 (1)确定事件(submit事件),创建一个函数并和该事件绑定. (2)书写函数对输入的数据是否合法进行校验(需要设定ID并通过ID来获取用户输入的数据的值). (3)输入的信息合法 ...
- 单细胞分析实录(2): 使用Cell Ranger得到表达矩阵
Cell Ranger是一个"傻瓜"软件,你只需提供原始的fastq文件,它就会返回feature-barcode表达矩阵.为啥不说是gene-cell,举个例子,cell has ...
- 解决MySQL Workbench导出低版本MySQL时报错Unknown table ‘column_statistics’ in information_schema的问题
在使用高版本MySQL Workbench或MySQL 8.0+版本提供的mysqldump.exe(实际高版本的MySQL Workbench使用的也是高版本的mysqldump.exe)来导出低于 ...
- C#实现 Server-sent Events
基于http协议交互的推送方法大概方法如下: 轮询(ajax),比较耗费服务器资源.COMET方式(COMET 技术并不是 HTML 5 ) websocket 双向数据推送,灵活,功能强大 Serv ...
- MariaDB Galera Cluster集群搭建
MariaDB Galera Cluster是什么? Galera Cluster是由第三方公司Codership所研发的一套免费开源的集群高可用方案,实现了数据零丢失,官网地址为http://g ...
- 入门Kubernetes -基础概念
一.Kubernetes概述 Kubernetes ,又称为 k8s(首字母为 k.首字母与尾字母之间有 8 个字符.尾字母为 s,所以简称 k8s)或者简称为 "kube" ,是 ...
- 【Software Test】Basic Of ST
文章目录 Learning Objective Introduction Software Applications Before Software Testing What is testing? ...
- 【System】进程,线程和任务之间的区别是什么?
任务(task)是最抽象的,是一个一般性的术语,指由软件完成的一个活动.一个任务既可以是一个进程,也可以是一个线程.简而言之,它指的是一系列共同达到某一目的的操作.例如,读取数据并将数据放入内存中.这 ...
- 攻防世界—pwn—guess_num
题目分析 checksec检查文件保护机制 这个结果看的我满是问号??? \n ida分析程序 是一个猜数字的游戏,需要全部输入正确才能得到flag 根据大佬的wp得出一下内容 先使用srand()进 ...
- Spring Cloud Alibaba学习笔记
引自B站楠哥:https://space.bilibili.com/434617924 一.创建父工程 创建父工程hello-spring-cloud-alibaba Spring Cloud Ali ...