最新,在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. js:表单校验(获取元素、事件)

    1.表单校验步骤 (1)确定事件(submit事件),创建一个函数并和该事件绑定. (2)书写函数对输入的数据是否合法进行校验(需要设定ID并通过ID来获取用户输入的数据的值). (3)输入的信息合法 ...

  2. 单细胞分析实录(2): 使用Cell Ranger得到表达矩阵

    Cell Ranger是一个"傻瓜"软件,你只需提供原始的fastq文件,它就会返回feature-barcode表达矩阵.为啥不说是gene-cell,举个例子,cell has ...

  3. 解决MySQL Workbench导出低版本MySQL时报错Unknown table ‘column_statistics’ in information_schema的问题

    在使用高版本MySQL Workbench或MySQL 8.0+版本提供的mysqldump.exe(实际高版本的MySQL Workbench使用的也是高版本的mysqldump.exe)来导出低于 ...

  4. C#实现 Server-sent Events

    基于http协议交互的推送方法大概方法如下: 轮询(ajax),比较耗费服务器资源.COMET方式(COMET 技术并不是 HTML 5 ) websocket 双向数据推送,灵活,功能强大 Serv ...

  5. MariaDB Galera Cluster集群搭建

    MariaDB Galera Cluster是什么?   Galera Cluster是由第三方公司Codership所研发的一套免费开源的集群高可用方案,实现了数据零丢失,官网地址为http://g ...

  6. 入门Kubernetes -基础概念

    一.Kubernetes概述 Kubernetes ,又称为 k8s(首字母为 k.首字母与尾字母之间有 8 个字符.尾字母为 s,所以简称 k8s)或者简称为 "kube" ,是 ...

  7. 【Software Test】Basic Of ST

    文章目录 Learning Objective Introduction Software Applications Before Software Testing What is testing? ...

  8. 【System】进程,线程和任务之间的区别是什么?

    任务(task)是最抽象的,是一个一般性的术语,指由软件完成的一个活动.一个任务既可以是一个进程,也可以是一个线程.简而言之,它指的是一系列共同达到某一目的的操作.例如,读取数据并将数据放入内存中.这 ...

  9. 攻防世界—pwn—guess_num

    题目分析 checksec检查文件保护机制 这个结果看的我满是问号??? \n ida分析程序 是一个猜数字的游戏,需要全部输入正确才能得到flag 根据大佬的wp得出一下内容 先使用srand()进 ...

  10. Spring Cloud Alibaba学习笔记

    引自B站楠哥:https://space.bilibili.com/434617924 一.创建父工程 创建父工程hello-spring-cloud-alibaba Spring Cloud Ali ...