最新,在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. Ubuntu系统下电脑驱动的安装(wifi无线网卡)

    今天给自己的笔记本电脑安装了新的Ubuntu 16.04但是安装之后发现wifi无法启用.这里特说明解决过程. 首先,网上的大部分教程是 选择"系统设置",点击"软件和更 ...

  2. std::thread线程详解(1)

    目录 目录 简介 线程的使用 线程的创建 线程的方法和属性 std::jthread (C++20) stop_token (C++20) 总结 Ref 简介 本文主要介绍了标准库中的线程部分.线程是 ...

  3. TurtleBot3 Waffle (tx2版华夫)(10)自主导航(A2激光雷达)

    1)[Remote PC] 启动roscore $ roscore 2)[TurBot3] 启动turbot3 $ roslaunch turbot3_bringup minimal.launch 3 ...

  4. MFC3 基本对话框的使用(三) 滑块与进度条(sdnu)(C++大作业)

    一.完成界面 运行前: 运行后: 二.工具 (1)滑块 (2)进度条 (3)文本框 (4)文本示例 (5)按钮 三.添加变量 四.添加事件 右键单击主对话框空白部分,打开类向导,选择"消息& ...

  5. 2018年第九届蓝桥杯B组(201803-----乘积尾零)

    标题题目:乘积尾零 如下的10行数据,每行有10个整数,请你求出它们的乘积的末尾有多少个零? 5650 4542 3554 473 946 4114 3871 9073 90 4329 2758 79 ...

  6. 了解一下RPC,为何诞生RPC,和HTTP有什么不同?

    了解一下RPC,为何诞生RPC,和HTTP有什么不同? 开篇提问 什么是RPC? 为什么需要RPC,用来解决什么问题? RPC与HTTP有什么不同? 你知道几种RPC? 认识RPC RPC:Remot ...

  7. 操作系统-1w字关于内存的总结

    内存的基本概念 什么是内存,有何作用 内存是用于存放数据的硬件.程序执行前需要先放入内存中才能被CPU处理 存储单元 内存中也有一个一个的小房间,每个小房间就是一个存储单元. 如果计算机按照 字节编址 ...

  8. windows打包脚本出现 /bin/sh^M: 坏的解释器: 没有那个文件或目录 错误

    1.错误描述 我在Windows 10 系统下打包dolphinscheduler,上传到centos7解压之后,执行脚本报如下错误: -bash: ./dolphinscheduler-daemon ...

  9. 【Oracle】转:通过案例学调优之--Oracle Time Model(时间模型)

    转自:http://blog.51cto.com/tiany/1596012 通过案例学调优之--Oracle Time Model(时间模型) 数据库时间 优化不仅仅是缩短等待时间.优化旨在缩短最终 ...

  10. C#实现一个弹窗监控小程序

    一..实现弹窗淡入淡出等效果即弹窗自动关闭 技术要点: 1.弹窗效果(淡入淡出,自下而上滑入)使用WIN API实现 2.弹出的窗体在一定时间后,自动关闭使用一个timer实现,弹窗开始是,打开tim ...