最新,在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. Kafka 探险 - 架构简介

    Kafka 探险 - 架构简介 这个 Kafka 的专题,我会从系统整体架构,设计到代码落地.和大家一起杠源码,学技巧,涨知识.希望大家持续关注一起见证成长! 我相信:技术的道路,十年如一日!十年磨一 ...

  2. 跨域的几种方式以及call(),apply() bind()方法的作用和区别

    jsonp: jsonp 全称是JSON with Padding,是为了解决跨域请求资源而产生的解决方案,是一种依靠开发人员创造出的一种非官方跨域数据交互协议. 一个是描述信息的格式,一个是信息传递 ...

  3. Flutter 基础组件:输入框和表单

    前言 Material组件库中提供了输入框组件TextField和表单组件Form. 输入框TextField 接口描述 const TextField({ Key key, // 编辑框的控制器,通 ...

  4. IO软件层次结构与假脱机技术

    IO软件层次结构 用户层软件->设备独立性软件->设备驱动软件->中断处理程序->硬件 用户层软件实现与用户交互的接口,用户可直接使用该层提供的,与IO操作相关的库函数对设备进 ...

  5. python模块详解 | selenium(持续更新中)

    目录: 关于selenium Selenium 安装Selenium 安装浏览器驱动 配置环境变量 selenium方法详解 定位元素 元素操作 浏览器操作 鼠标事件 浏览器事件 设置元素等待 多表单 ...

  6. 【Vue】Vue框架常用知识点 Vue的模板语法、计算属性与侦听器、条件渲染、列表渲染、Class与Style绑定介绍与基本的用法

    Vue框架常用知识点 文章目录 Vue框架常用知识点 知识点解释 第一个vue应用 模板语法 计算属性与侦听器 条件渲染.列表渲染.Class与Style绑定 知识点解释 vue框架知识体系 [1]基 ...

  7. 【Git】4、创建代码仓库,HTTP、SSH拉取远端代码

    拉取远端代码:使用Git命令下载远程仓库到本地 文章目录 拉取远端代码:使用Git命令下载远程仓库到本地 1.创建远程代码仓库 2.创建仓库 3.进入仓库 4.HTTP(S)获取远程仓库 首次拉取 更 ...

  8. 【二分搜索树】1、二分查找法的实现 - Binary Search

    简单记录 - bobo老师的玩转算法系列–玩转算法 - 二分搜索树 二叉搜索树 Binary Search Tree 查找问题 Searching Problem 查找问题是计算机中非常重要的基础问题 ...

  9. Jenkins自动部署spring boot

    Jenkins自动部署spring boot 背景介绍 本公司属于微小型企业,初期业务量不高,所有程序都写在一个maven项目里面,不过是多模块开发. 分了login模块,service模块,cms模 ...

  10. Ice系列--强大如我IceGrid

    前言 IceGrid是一个提供服务定位和服务激活的组件,但它的功能远不止于此.从它的命名可以看出它的设计理念-网格计算(grid computing).网格计算被定义为由一系列关联的廉价计算机组成的计 ...