最新,在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函数的使用的更多相关文章

  1. 慎用lodash的cloneDeep函数

    lodash的cloneDeep函数能够很方便的拷贝对象,但是一旦拷贝一些很复杂的对象就有可能报错.比如用cloneDeep克隆一个vue实例,就有可能包key.charAt is not a Fun ...

  2. 如何使用 js 实现一个 debounce 函数

    如何使用 js 实现一个 debounce 函数 原理 防抖: 是指在指定的单位时间内,如果重复触发了相同的事件,则取消上一次的事件,重新开始计时! 实现方式 "use strict&quo ...

  3. 关于Js debounce 函数小结

    一.前言 以下场景往往由于事件频繁被触发,因而频繁执行DOM操作.资源加载等重行为,导致UI停顿甚至浏览器崩溃. 1. window对象的resize.scroll事件 2. 拖拽时的mousemov ...

  4. nodejs lodash的一些函数

    1   _.compact用法   _.compact([0, 1, false, 2, '', 3,'mm']); var test = _.compact([-1,0, 1, false, 2, ...

  5. throttle和debounce函数

    控制耗性能的函数,避免浏览器卡死

  6. Loadsh 常用方法总结以及在vue中使用Loadsh

    Loadsh 常用方法总结以及在vue中使用Loadsh Lodash 是一个一致性.模块化.高性能的 JavaScript 实用工具库.处理复杂数组,对比等可以直接采用该库,也方便快捷. 官方网站 ...

  7. JavaScript 任务池

    JavaScript 任务池 本文写于 2022 年 5 月 13 日 线程池 在多线程语言中,我们通常不会随意的在需要启动线程的时候去启动,而是会选择创建一个线程池. 所谓线程池,本意其实就是(不止 ...

  8. lodash用法系列(3),使用函数

    Lodash用来操作对象和集合,比Underscore拥有更多的功能和更好的性能. 官网:https://lodash.com/引用:<script src="//cdnjs.clou ...

  9. Javascript中 节流函数 throttle 与 防抖函数 debounce

    问题的引出 在一些场景往往由于事件频繁被触发,因而频繁地进行DOM操作.资源加载,导致UI停顿甚至浏览器崩溃. 在这样的情况下,我们实际上的需求大多为停止改变大小n毫秒后执行后续处理:而其他事件大多的 ...

随机推荐

  1. 使用UML工具分析类图与类的关系-bouml(java和C++)

    在分析类之间的关系时可以借助工具来实现. bouml是一个UML分析工具,最新的版本是收费的,但是之前的版本是免费的. 这里使用的是4.23版. Bouml安装: 安装软件就按照流程走就行了.但是第一 ...

  2. C语言全排列

    #include <stdio.h> int m=5; char s[]="12345"; void Swap(char *a, char *b)//元素交换 { ch ...

  3. java有关静态代理及动态代理的实现

    引言: 代理是基本的设计模式之一,它为你提供额外的或不同的操作而插入的用来代替实际对象的对象(委托对象).这些对象通常涉及到与实际对象的通信,因此代理通常充当中间人的角色.--JAVA编程思想 相关的 ...

  4. CSS卡片旋转

    html{ perspective: 800px; } body{ display:flex; flex-wrap: wrap; } .card{ transform-style: preserve- ...

  5. SpringBoot启动报端口已被占用--解决

    问题 启动SpringBoot项目后发现启动失败,控制台输出以下内容 Description: The Tomcat connector configured to listen on port 81 ...

  6. 【.NET 与树莓派】使用 GPIO 库

    上回老周在说准备工作的时候,提到过树莓派用金属盒散热的事情.有朋友会说,加了金属盒子接线不方便,就算用了"T"形板,毕竟是把导线延长了的.其实扩展板就是把原有的引脚引出(类似于延长 ...

  7. 转载 - Ubuntu源改国内源 与 批量更改ubuntu机器apt源

    change_apt_source.sh # !/bin/bash # 备份原来的源文件 cp /etc/apt/sources.list /etc/apt/sources.list.bak # 获取 ...

  8. 腾讯QQ,人人都是高手

    今天,腾讯果然给出了官方回应,具体表述如下: 可能你看不太懂,其实我也看的不太懂,不过这就是公关的能力体现,就像我"人人都是高手"的大连车务组微机室小编一样,把一个降级flash描 ...

  9. 【Linux】Linux进程间通信的几种方式

    一.进程间通信的目的 数据传输:一个进程需要将它的数据发送给另一个进程,发送的数据量在一个字节到几M字节之间 共享数据:多个进程要操作共享数据,一个进程对共享数据 信息传递:一个进程需要向另一个进程发 ...

  10. iptables原理及防火墙规则语法基础

     Iptables 防火墙 学习总结: 三张表介绍: filter负责过滤数据包,包括的规则链有,input(进),output(出)和forward(转发); nat则涉及到网络地址转换,包括的规则 ...