最近才发现 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接口自动化】初识unittest框架

    本文将介绍单元测试的基础版及使用unittest框架的单元测试. 完成以下需求的代码编写,并实现单元测试 账号正确,密码正确,返回{"msg":"账号密码正确,登录成功& ...

  2. [leetcode] 875. 爱吃香蕉的珂珂(周赛)

    875. 爱吃香蕉的珂珂 这题时间要求比较严格... 首先,将piles排序,然后二分查找. 总之,答案K肯定位于piles[?]piles[?+1]或者1piles[0]之间 所以我们先二分把?找到 ...

  3. 改进遗传算法之CHC算法简要介绍

    简要介绍: CHC算法是Eshelman于1991年提出的一种改进的遗传算法的缩称,第一个C代表跨世代精英选择(Cross generational elitist selection)策略, H代表 ...

  4. 快速导入GitHub上面的公钥

    有时候新装了一台linux机器, 又要找公钥导进去, 或者在自己电脑上执行ssh-copy-id, 有时候手边没有电脑就比较麻烦, 我们可以将GitHub上配置的公钥导入到机器里 首先包装GitHub ...

  5. TVM部署预定义模型

    TVM部署预定义模型 本文通过深度学习框架量化的模型加载到TVM中.预量化的模型导入是在TVM中提供的量化支持之一. 本文演示如何加载和运行由PyTorch,MXNet和TFLite量化的模型.加载后 ...

  6. AlexeyAB DarkNet YOLOv3框架解析与应用实践(二)

    AlexeyAB DarkNet YOLOv3框架解析与应用实践(二) 版本3有什么新功能? YOLOv3使用了一些技巧来改进训练和提高性能,包括:多尺度预测.更好的主干分类器等等.全部细节都在我们的 ...

  7. AlexeyAB DarkNet YOLOv3框架解析与应用实践(一)

    AlexeyAB DarkNet YOLOv3框架解析与应用实践(一) Darknet:  C语言中的开源神经网络 Darknet是一个用C和CUDA编写的开源神经网络框架.它速度快,易于安装,支持C ...

  8. ASML光刻机PK 原子弹,难度?

    ASML光刻机PK 原子弹,难度? 一.  物理世界和网络世界的交汇点:光刻机 光刻机的技术有多高级,看看这个知乎提问,可以感受一下: 有人这样形容光刻机:这是一种集合了数学.光学.流体力学.高分子物 ...

  9. Java 反射编程(上)

    文章目录 反射的泛型就是用`? `来描述 反射与类的操作 (取得父类信息) 取得父类信息 1. 获得本类的包名称: 2. 取得父类的Class 对象 3. 取得父类接口 案例: 使用上述方法 反射与类 ...

  10. 三、Tomcat配置文件的介绍

    *允许直接复制另外多份完整的tomcat数据,修改配置保证不冲突,起多个tomcat,优点:其中一个tomcat挂了不影响其他网页 tomcat配置文件server.xml介绍 <Server& ...