最近才发现 debounce 在 减少DOM操作及资源加载方面得重要性,遂写个博客记录一下

/**
* @param {Function} func 要执行的函数
* @param {number} wait 间隔时间
* @param {boolean} immediate
* @return {*}
*/
function debounce(func, wait, immediate) {
let timeout, args, context, timestamp, result const later = function() {
// 据上一次触发时间间隔
const last = +new Date() - timestamp // 上次被包装函数被调用时间间隔 last 小于设定时间间隔 wait
if (last < wait && last > 0) {
timeout = setTimeout(later, wait - last)
} else {
timeout = null
// 如果设定为immediate===true,因为开始边界已经调用过了此处无需调用
if (!immediate) {
result = func.apply(context, args)
if (!timeout) context = args = null
}
}
} return function(...args) {
context = this
timestamp = +new Date()
const callNow = immediate && !timeout
// 如果延时不存在,重新设定延时
if (!timeout) timeout = setTimeout(later, wait)
if (callNow) {
result = func.apply(context, args)
context = args = null
} return result
}
}

这段代码是抄的 element-admin 里面的,自己理解了下,最后return 的函数的(...args) 有啥用还是没搞清楚,不过用还是好用的

去抖动 debounce的更多相关文章

  1. FPGA低级建模---按键去抖动

    FPGA低级建模,原则上一个模块一个功能,如按键去抖动建模中,有两个模块. 1.detect_module 这个是按键检测模块,主要检测按键的高低电平变化,现在按键是按下还是释放. 2.delay_m ...

  2. week05 06绑定滚动条 去抖动

    像这种小代码 为了满足某种需求 可以直接上网搜 这些都是JS代码和react无关 我们下拉 就会触发事件从而调用loading more news 那个函数 react要求我们加个key key就是唯 ...

  3. js 函数节流throttle 函数去抖debounce

    1.函数节流throttle 通俗解释: 假设你正在乘电梯上楼,当电梯门关闭之前发现有人也要乘电梯,礼貌起见,你会按下开门开关,然后等他进电梯: 但是,你是个没耐心的人,你最多只会等待电梯停留一分钟: ...

  4. 【第一季】CH08_FPGA_Button 按钮去抖动实验

    [第一季]CH08_FPGA_Button 按钮去抖动实验 按键的消抖,是指按键在闭合或松开的瞬间伴随着一连串的抖动,这样的抖动将直接影响设计系统的稳定性,降低响应灵敏度.因此,必须对抖动进行处理,即 ...

  5. 深入理解JS函数节流和去抖动

    一.什么是节流和去抖? 1.节流 节流就是拧紧水龙头让水少流一点,但是不是不让水流了.想象一下在现实生活中有时候我们需要接一桶水,接水的同时不想一直站在那等着,可能要离开一会去干一点别的事请,让水差不 ...

  6. vue中使用window.resize并去抖动优化

    this.clientWidth = document.documentElement.clientWidth window.onresize = () => { this.clientWidt ...

  7. 前端网络、JavaScript优化以及开发小技巧

    一.网络优化 YSlow有23条规则,中文可以参考这里.这几十条规则最主要是在做消除或减少不必要的网络延迟,将需要传输的数据压缩至最少. 1)合并压缩CSS.JavaScript.图片,静态资源CDN ...

  8. Vue.js示例:文本编辑器。使用_.debounce()反抖动函数

    Markdown编辑器 https://cn.vuejs.org/v2/examples/index.html 新知识: Underscore.js库 用于弥补标准库,方便了JavaScript的编程 ...

  9. 关于Js debounce 函数小结

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

随机推荐

  1. 太赞了!Python竟可以轻松实现音频格式无损转换

    大家好,我是辰哥 辰哥在平时处理音频格式的时候,需要去下载各种音频处理软件(专业一点的软件还要收费),掌握Python技术的我们,知道Python是万能的(哈哈哈,开个玩笑).今天辰哥就来教大家用Py ...

  2. 电脑华硕A455L系列,机械硬盘换成固态硬盘,光驱位改放机械硬盘

    电脑一直以来都很卡,直到最近用的不舒服了,就去查查原因,发现是磁盘读取爆表!只好想起来换固态硬盘,光驱改放机械硬盘... 买的固态硬盘是个杂牌军,但是店家说工艺不错,只好将信将疑,用用再说吧. 首先确 ...

  3. 通过 DLPack 构建跨框架深度学习编译器

    通过 DLPack 构建跨框架深度学习编译器 深度学习框架,如Tensorflow, PyTorch, and ApacheMxNet,快速原型化和部署深度学习模型提供了强大的工具箱.不幸的是,易用性 ...

  4. 用华为MindSpore进行分布式训练

    技术背景 分布式和并行计算,在计算机领域是非常重要的概念.对于一些行外人来说,总觉得这是一些很简单的工作,但是如果我们纵观计算机的硬件发展史,从CPU到GPU,再到TPU和华为的昇腾(NPU),乃至当 ...

  5. zookeeper分布式锁,解决了羊群效应, 真正的zookeeper 分布式锁

    zookeeper 实现分布式锁,监听前一个节点来避免羊群效应, 思路:很简单,但是实现起来要麻烦一些, 而且我也是看了很多帖子,发现很多帖子的代码,下载下来逐步调试之后发现,看起来是对的,但在并发情 ...

  6. 如何下载安装Python

     github博客传送门 csdn博客传送门 如何下载安装python 第一步: 在python的官网下载python版本,需要下载对应版本(在计算机-属性中查看自己是32位操作系统还是64位操作系统 ...

  7. 『心善渊』Selenium3.0基础 — 3、使用Selenium操作浏览器对象的基础API

    目录 1.导入Selenium库 2.创建浏览器对象 3.浏览器窗口大小设置 4.浏览器位置设置 5.请求访问网址 6.浏览器页面前进.后退和刷新 7.关闭浏览器 相比于高大上的各种Selenium进 ...

  8. linux下 大日志文件查看与搜索---less

    场景 有一个几十m的大日志文件,里边的记录是按时间排序的. 现在需要找到其中,不知道在什么位置的一条错误消息.这时候,想把内容拷出来都费劲,就算拷出来了,一般的编辑器也难以hold住这么大的文件.这时 ...

  9. [源码解析] 深度学习分布式训练框架 horovod (10) --- run on spark

    [源码解析] 深度学习分布式训练框架 horovod (10) --- run on spark 目录 [源码解析] 深度学习分布式训练框架 horovod (10) --- run on spark ...

  10. Spring Boot 无侵入式 实现RESTful API接口统一JSON格式返回

    前言 现在我们做项目基本上中大型项目都是选择前后端分离,前后端分离已经成了一个趋势了,所以总这样·我们就要和前端约定统一的api 接口返回json 格式, 这样我们需要封装一个统一通用全局 模版api ...