去抖动 debounce
最近才发现 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的更多相关文章
- FPGA低级建模---按键去抖动
FPGA低级建模,原则上一个模块一个功能,如按键去抖动建模中,有两个模块. 1.detect_module 这个是按键检测模块,主要检测按键的高低电平变化,现在按键是按下还是释放. 2.delay_m ...
- week05 06绑定滚动条 去抖动
像这种小代码 为了满足某种需求 可以直接上网搜 这些都是JS代码和react无关 我们下拉 就会触发事件从而调用loading more news 那个函数 react要求我们加个key key就是唯 ...
- js 函数节流throttle 函数去抖debounce
1.函数节流throttle 通俗解释: 假设你正在乘电梯上楼,当电梯门关闭之前发现有人也要乘电梯,礼貌起见,你会按下开门开关,然后等他进电梯: 但是,你是个没耐心的人,你最多只会等待电梯停留一分钟: ...
- 【第一季】CH08_FPGA_Button 按钮去抖动实验
[第一季]CH08_FPGA_Button 按钮去抖动实验 按键的消抖,是指按键在闭合或松开的瞬间伴随着一连串的抖动,这样的抖动将直接影响设计系统的稳定性,降低响应灵敏度.因此,必须对抖动进行处理,即 ...
- 深入理解JS函数节流和去抖动
一.什么是节流和去抖? 1.节流 节流就是拧紧水龙头让水少流一点,但是不是不让水流了.想象一下在现实生活中有时候我们需要接一桶水,接水的同时不想一直站在那等着,可能要离开一会去干一点别的事请,让水差不 ...
- vue中使用window.resize并去抖动优化
this.clientWidth = document.documentElement.clientWidth window.onresize = () => { this.clientWidt ...
- 前端网络、JavaScript优化以及开发小技巧
一.网络优化 YSlow有23条规则,中文可以参考这里.这几十条规则最主要是在做消除或减少不必要的网络延迟,将需要传输的数据压缩至最少. 1)合并压缩CSS.JavaScript.图片,静态资源CDN ...
- Vue.js示例:文本编辑器。使用_.debounce()反抖动函数
Markdown编辑器 https://cn.vuejs.org/v2/examples/index.html 新知识: Underscore.js库 用于弥补标准库,方便了JavaScript的编程 ...
- 关于Js debounce 函数小结
一.前言 以下场景往往由于事件频繁被触发,因而频繁执行DOM操作.资源加载等重行为,导致UI停顿甚至浏览器崩溃. 1. window对象的resize.scroll事件 2. 拖拽时的mousemov ...
随机推荐
- 如何屏蔽 iOS 软件自动更新,去除更新通知和标记
适用于 iOS.iPadOS 和 watchOS,即 iPhone.iPad 和 Apple Watch 通用. 请访问原文链接:https://sysin.org/article/Disable-i ...
- 如何让Android 支持HEIF 图片解码和加载(免费的方法)
字节跳动火山引擎ImageX提供了一种能力,可以支持客户端android 直接解码HEIF 和HEIC图片,经过测试发现,可以免费使用: 一.阅前准备 HEIF图片格式是什么? 高效率图像格式(Hig ...
- [转]CAP和BASE理论
1. CAP理论 2000年7月,加州大学伯克利分校的Eric Brewer教授在ACM PODC会议上提出CAP猜想.2年后,麻省理工学院的Seth Gilbert和Nancy Lynch从理论上证 ...
- python中的时间戳和格式化之间的转换
import time #把格式化时间转换成时间戳 def str_to_timestamp(str_time=None, format='%Y-%m-%d %H:%M:%S'): if str_ti ...
- 给手绘图着色(添加颜色或色彩):CVPR2020论文点评
给手绘图着色(添加颜色或色彩):CVPR2020论文点评 Learning to Shade Hand-drawn Sketches 论文链接:https://arxiv.org/pdf/2002.1 ...
- TensorFlow Frontend前端
TensorFlow Frontend前端 TensorFlow前端有助于将TensorFlow模型导入TVM. Supported versions: 1.12 and below Tested m ...
- Paddle Inference原生推理库
Paddle Inference原生推理库 深度学习一般分为训练和推理两个部分,训练是神经网络"学习"的过程,主要关注如何搜索和求解模型参数,发现训练数据中的规律,生成模型.有了训 ...
- javaBean命名规范 get / set 后的首字母大写
javaBean命名规范 Sun 推荐的命名规范 1 ,类名要首字母大写,后面的单词首字母大写 2 ,方法名的第一个单词小写,后面的单词首字母大写 3 ,变量名的第一个单词小写,后面的单词首字母大写 ...
- CentOS:操作系统级监控及常用计数器解析
我相信有一些人看到这篇文章的标题肯定有种不想看的感觉,因为这样的内容实在被写得太多太多了.操作系统分析嘛,无非就是 CPU 使用率.I/O 使用率.内存使用率.网络使用率等各种使用率的描述. 然而因为 ...
- 使用NDepend衡量代码的SOLID程度
SOLID是面向对象的软件开发中的5条准则,也是开发人员可以提升自己代码质量的准则.那么如何衡量自己的代码是否符合SOLID准则呢?NDepend这款工具也许可以帮得上忙.本文将介绍一些NDepend ...