最新,在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. leetcode上面用刷题不要使用static静态变量

    因为leetcode上面每个测试用例会使用之前的同一个类,使用静态变量会导致静态变量的值不被初始话从而使得本次测试用例,之前的静态变量,从而导致错误发生.

  2. windows 10放大125%后字体模糊(已解决)、win10 文字放大之后变模糊 解决办法

    windows 10放大125%后字体模糊解决办法 百度搜索 "Windows10_DPI_FIX" 或者用这个地址下载下载地址   https://gallery.technet ...

  3. 【Azure Application Insights】在Azure Function中启用Application Insights后,如何配置不输出某些日志到AI 的Trace中

    问题描述 基于.NET Core的Function App如果配置了Application Insights之后,每有一个函数被执行,则在Application Insights中的Logs中的tra ...

  4. 伯俊BOS2.0店铺收入对账功能设计

    一.客户需求 通过导入银行POS机流水,将流水与ERP系统的零售付款数据进行对比,统计差异! 二.功能设计 1.新增"POS机号对应表单",用于维护POS机与erp店仓对应 2.新 ...

  5. TurtleBot3 Waffle (tx2版华夫)(1)笔记本上安装虚拟机、 Ubuntu 系统

    1.1虚拟机的安装 1.1.1.windows7系统建议安装14.1版本 VMware workstation 百度云链接: 链接:https://pan.baidu.com/s/1q6Lh9fMuX ...

  6. maven项目pom.xml解析

  7. oracle坚决不挂2(SQLPLUS基础命令)

    继续复习!!SQLplus基础命令,其实这个应该是第一个要复习的.因为基础,你懂得..要想学会跑,你先得知道该怎么走吧. win+R 输入cmd ,我们开始启动SQLplus sqlplus user ...

  8. Writing in the science: Introducion

    1.what makes a good writing? 2.what makes a good writer? 1) have something to say 2) logical thinkin ...

  9. python面向对象基础-属性/方法

  10. 关于使用jq跨域请求的实现

    今天算是把js跨域请求搞定了,想实现跨越,首先想到的是JSONP,但是具体去做的时候,发现有很多坑.在本地测试好之后又发现目标网站做了https证书认证,也就是实用的jsonp请求地址必须是https ...