前端高频面试题： 防抖和节流的理解，及其应用场景 01 概 念 目的：当多次执行某一动作，进行函数调用次数的限制，节省资源 防抖：在事件触发n秒后执行函数，如果在n秒内再次出发，重新计时 节流：当多次执行某一动作...区别： 函数节流不管事件触发有多频繁，都会保证在规定时间内一定会执行一次真正的事件处理函数，而函数防抖只是在最后一次事件后才触发一次函数。...比如在页面的无限加载场景下，我们需要用户在滚动页面时，每隔一段时间发一次 Ajax 请求，而不是在用户停下滚动页面操作时才去请求数据。这样的场景，就适合用节流技术来实现。...代码实现重在开锁关锁 02 应用场景 函数防抖的应用场景 连续的事件，只需触发一次回调的场景有： 登录、发短信等按钮避免用户点击太快，以致于发送了多次请求 搜索框搜索输入。...鼠标的mousemove、mouseover 导航条上，用户不停的在导航区域滑动相当于 函数节流的应用场景 间隔一段时间执行一次回调的场景有： 滚动加载，加载更多或滚到底部监听，window.onscroll
节流函数 Throttle 我们先来看一张图，这张图充分说明了 Throttle（节流）和 Debounce（防抖）的区别，以及在不同配置下产生的不同效果，其中 mousemove 事件每 50 ms...触发一次，即下图中的每一小隔是 50 ms。...mousemove 停止触发假设第八次触发之后就停止了滚动，在第八次触发时 time 为 350，所以如果有第九次触发，那么此时是应该执行fn 的，但是此时 mousemove 已经停止了触发，那么还会执行...角度 2lodash.throttle(fn, 200, {leading: true, trailing: false})在「角度 1 之 mousemove 停止触发」这部分中说到，如果不设置 trailing...所以在 throttle 中不需要刚开始就触发时，必须指定 {leading: false}，在 debounce 中就不需要了，默认不触发。
防抖应用场景如下 搜索框输入查询，如果用户一直在输入中，没有必要不停地调用去请求服务端接口，等用户停止输入的时候，再调用，设置一个合适的时间间隔，有效减轻服务端压力。 表单验证 按钮提交事件。...，也都是每 delay 时间才执行一次。...当第一次触发事件时，不会立即执行函数，而是在 delay 秒后才执行。而后再怎么频繁触发事件，也都是每 delay 时间才执行一次。...input 框搜索，用户在不断输入值时，用防抖来节约请求资源。 window 触发 resize 的时候，不断的调整浏览器窗口大小会不断的触发这个事件，用防抖来让其只触发一次。...而函数防抖只是在最后一次事件后才触发一次函数。 比如在页面的无限加载场景下，我们需要用户在滚动页面时，每隔一段时间发一次 Ajax 请求，而不是在用户停下滚动页面操作时才去请求数据。
防抖（debounce） 1.1 什么是防抖 在事件被触发n秒后再执行回调函数，如果在这n秒内又被触发，则重新计时。...1.2 应用场景 (1) 用户在输入框中连续输入一串字符后，只会在输入完后去执行最后一次的查询ajax请求，这样可以有效减少请求次数，节约请求资源； (2) window的resize、scroll事件...这就会导致每一次高频事件都会取消前一次的超时调用，导致事件处理程序不能被触发； 2.只有当高频事件停止，最后一次事件触发的超时调用才能在delay时间后执行； 效果： 加入防抖后，当持续在输入框里输入时...如果先停止输入，但是在指定间隔内又输入，会重新触发计时。...2.2 应用场景 (1)鼠标连续不断地触发某事件（如点击），只在单位时间内只触发一次； (2)在页面的无限加载场景下，需要用户在滚动页面时，每隔一段时间发一次 ajax 请求，而不是在用户停下滚动页面操作时才去请求数据
1.简介我们在日常工作中，会经常遇到弹出警告框的问题，弹框无法绕过，必须处理才可以执行后续的测试，所以弹框处理也是我们必须掌握的一个知识。宏哥在java+selenium系列文章中介绍过这部分内容。...默认情况下，Playwright 会自动关闭对话框，因此您不必处理它们。但是，可以在触发对话的操作之前注册对话处理程序 Dialog.accept（） 或 Dialog.dismiss（） 它。...否则，你的操作将停止，无论是 Locator.click（） 还是其他内容。这是因为 Web 中的对话框是模态对话框，因此会阻止进一步的页面执行，直到它们被处理。...4.1警告框警告框经常用于确保用户可以得到某些信息。当警告框出现后，用户需要点击确定按钮才能继续进行操作。语法：alert("文本")4.2确认框确认框用于使用户可以验证或者接受某些信息。...如下图所示：6.小结Page.onDialog（handler） 监听器存在必须处理该对话框。否则您的操作将停止，无论是 locator.click（） 还是其他内容。
只有当定时器结束并且在间隔期间没有新的触发事件发生时，才执行函数。 举例来说，假设我们有一个输入框，用户每输入一个字符就会触发一个输入事件，我们希望在用户停止输入后的500毫秒再执行输入验证函数。...这时候就可以利用防抖动的思想，在输入事件触发时启动一个500毫秒的定时器，在每次输入事件触发时重新计时。...只有当用户停止输入并且500毫秒内没有新的输入事件发生时，才执行输入验证函数，从而减少了函数执行的频率。...防抖的核心原理 防抖的核心原理是通过设置定时器来延迟函数的执行，在指定的时间间隔内，如果函数再次被触发，则重新计时。只有当定时器结束并且在间隔期间没有新的触发事件发生时，才执行函数。...如果定时器到期并且在等待期间没有新的触发事件发生，执行函数。 这样就保证了在频繁触发事件时，只有最后一次触发事件被处理，而其他触发事件被忽略，从而达到减少函数执行次数和提升性能的效果。
,函数都会变成window对象的属性和方法 在调用的时候可以省略window,前面学习的对话框都属于window对象方法,如alert(),prompt()等....调整窗口大小事件 window. addEventListener('resize', function( ){ }); window.onresize是调整窗口大小加载事件,当触发时就调用的处理函数...我们试着让程序在2秒后弹出警示框: 这个延时时间单位是毫秒,但是也可以省略,省略默认为0 这个调用函数可以直接写函数,还可以写函数名,还可以'函数名()'(不推荐最后一种写法) 页面中可能有多个定时器...(timeout ID) 我们现在做一个按钮,按下以后倒计时就会停下来: 没按下停止时: 按下停止以后: setInterval( )定时器 window.setInterval(回调函数,...好在都解决了,自己想办法解决问题真的很有趣 看一下我是怎么做的吧 听老师讲完,发现自己还存在一些问题: 解决方法:在调用定时器之前先执行一次函数 停止setInterval( )定时器
在下面的实例中，当点击事件在某个 元素上触发时，隐藏当前的元素： $("p").click(function(){ $(this).hide(); }); 双击事件 当双击元素时，会发生...在下面的实例中，当双击事件在某个 元素上触发时，隐藏当前的元素： $("p").dblclick(function(){ $(this).hide(); }); 鼠标穿过事件 当鼠标指针穿过元素时...当鼠标移动到元素上时，会触发指定的第一个函数(mouseenter，); 当鼠标移出这个元素时，会触发指定的第二个函数(mouseleave)。...下面实例中，鼠标移入元素时，触发mouseenter，弹出“Mouse up over p1!”警告框； 鼠标移出元素时，触发mouseleave，弹出“Bye!...jQuery stop() 方法用于停止动画或效果，在它们完成之前。
，直到指定时间间隔内没有再次触发，才会执行函数 缺点：如果事件在规定的时间间隔内被不断的触发，则调用方法会被不断的延迟 使用场景：文本框输入搜索（连续输入时避免多次请求接口） 个人通俗理解：事件连续触发...，只执行最后一次回调函数 示例如下： function showTop () { var scrollTop = document.body.scrollTop ||document.documentElement.scrollTop...原理是维护一个计时器，规定在delay时间后触发函数，但是在delay时间内再次触发的话，就会取消之前的计时器而重新设置。这样一来，只有最后一次操作能被触发。 函数节流：使得一定时间内只触发一次函数。...区别： 函数节流不管事件触发有多频繁，都会保证在规定时间内一定会执行一次真正的事件处理函数，而函数防抖只是在最后一次事件后才触发一次函数。...比如在页面的无限加载场景下，我们需要用户在滚动页面时，每隔一段时间发一次 Ajax 请求，而不是在用户停下滚动页面操作时才去请求数据。这样的场景，就适合用节流技术来实现。
安装过程我这里就不在重复说了，大家可以看我的CSDN博客号前面发的一些文章，有介绍的。...(1)串口的配置至少应当包含串口号、波特率、数据位、停止位、奇偶校验位、流控，这些都可以通过串口实例调用函数配置。可以加入几个comobox或者文本框来选择，也可以默认初始化时就配好。...(3)打开串口时，把配置的项的box都disable，使其不可修改，关闭时恢复 //串口开关按钮 void MainWindow::on_openSerialButton_clicked() {...因为要解决2个问题，一是我们需要一个超时间隔，用于在串口一定时间收不到数据时，判断一次接收完成，处理数据并清空buff。...//定时器触发打印串口数据 void MainWindow::uartRec_timeout() { if(!
"atMobiles": [ "xxxxxx" # 要@对象的手机号 ], } } # 机器人链接地址，发post...，比如每分钟；cron是apscheduler中功能最强的触发器，可以具体到每个月的某个时间触发，比如每天早上9:00。...2.6 运行，来看看效果啦 目前都属于自动触发，然后发送消息，首先是每日定时早上9:00发送服务器基本情况。...其次是每30s进行一次服务器数据检测（CPU使用率和负载），当数据超过阀值时，触发报警，发送消息提醒。...；Restart=on-failure表示系统发生意外导致程序退出时，程序自动重启。
节流（throttle） 节流指的都是某个函数在一定时间间隔内只执行第一次回调。...限流和防抖动在设计思想上一脉相承，只是限流是在某段时间内只执行首次回调，而防抖动通常是只执行末次回调。...比较常见的抖动场景是在自动索引的搜索设计上；当我们在搜索框内输入不同索引时，页面会频繁计算索引并渲染列表，以致产生抖动。...；而函数节流是间隔时间执行，不管事件触发有多频繁，都会保证在规定时间内一定会执行一次真正的事件处理函数。...防抖是维护一个计时器，规定在delay时间后触发函数，但是在delay时间内再次触发的话，都会清除当前的 timer 然后重新设置超时调用，即重新计时。这样一来，只有最后一次操作能被触发。
网络活动指示器： 出现在状态栏中，当网络活动正在进行时它会旋转，在活动停止时它则消失 不支持用户交互行为 当你的app正在链接网络，而这个连接过程将会持续好几秒的时候，你可以通过网络活动指示器来给用户以反馈...请严格控制你的app中警告的个数，并且保证每一个警告都能提供重要的信息，或者有用的选项。 避免出现不必要的警告框。一般来说，在以下情景中，是不需要用到警告框的： ?...我们推荐您限定好警告框的最大高度，保证在竖屏和横屏模式下文字均能不需要滚动便可完整地显示。 一般情况下，使用两个按钮的警告框。两个按钮的警告框是最为常见和有用的，因为它最便于用户在两个按钮中做选择。...如果你在警告框中设计了太多按钮，它也许会导致警告框被强制滚动，这也是一个非常糟糕的体验。 ? 提示 如果你需要在警告框中给与用户超过2个选项，可以考虑使用操作列表来代替警告框。 正确地放置按钮。...不要让模态视图覆盖在浮出层之上。除了警告框外，没有任何元素应该覆盖在弹出层上面。
可以在 JavaScript 中创建三种消息框：警告框、确认框、提示框。...警告框 警告框经常用于确保用户可以得到某些信息。 当警告框出现后，用户需要点击确定按钮才能继续进行操作。 语法： alert("你看到了吗？")...应用场景：通常用于表单元素,当元素内容被改变时触发.（select联动） onkeydown 某个键盘按键被按下。...应用场景: 当用户在最后一个输入框按下回车按键时,表单提交. onkeypress 某个键盘按键被按下并松开。 onkeyup 某个键盘按键被松开。...onselect 在文本框中的文本被选中时发生。 onsubmit 确认按钮被点击，使用的对象是form。
Shift+F8 转到上一个错误或警告 Ctrl+Shift+Tab 浏览编辑组历史 Alt+ ← / → 后退/前进 Ctrl+F 寻找 Ctrl+H 代替 F3 /Shift+F3 查找下一个/上一个...插入光标 Ctrl+Alt+ ↑ / ↓ 在上方/下方插入光标 Alt+Click 插入光标 Ctrl+Alt+ ↑ / ↓ 在上方/下方插入光标 Ctrl+U 撤消上一次光标操作 Shift+Alt+I 在选定的每一行的末尾插入光标...选择 Ctrl+Shift+Alt+（箭头键） 列（框）选择 Ctrl+Shift+Alt+PgUp/PgDn 列（框）选择页上/下 Ctrl+空格，Ctrl+I 触发器建议 Ctrl+Shift+空格...触发参数提示 Shift+Alt+F 格式化文档 Ctrl+K Ctrl+F 格式选择 F12 转到定义 Alt+F12 窥视定义 Ctrl+K F12 打开定义到一边 Ctrl+....Shift+V 打开 Markdown 预览 Ctrl+K V 打开 Markdown 预览到一边 Ctrl+K Z Zen 模式（Esc 退出） F9 断点切换 F5 开始/继续 Shift+F5 停止
@property(nonatomic,readonly,getter=isVisible) BOOL visible; 显现警告框 - (void)show; 代码模拟点击按钮消失触发方法 - (void...- (UITextField *)textFieldAtIndex:(NSInteger)textFieldIndex; 三、UIAlertViewDelegate中的方法 点击按钮时触发的方法 -...(void)alertView:(UIAlertView *)alertView clickedButtonAtIndex:(NSInteger)buttonIndex; 将要展现警告框时触发的方法 -...(void)willPresentAlertView:(UIAlertView *)alertView; 已经展现警告框时触发的方法 - (void)didPresentAlertView:(UIAlertView...)buttonIndex; 警告框已经消失时触发的方法 - (void)alertView:(UIAlertView *)alertView didDismissWithButtonIndex:(NSInteger
举个例子，实现一个原生的拖拽功能（不能用 H5 Drag&Drop API），需要一路监听 mousemove 事件，在回调中获取元素当前位置，然后重置 dom 的位置（样式改变）。...如果我们不加以控制，每移动一定像素而触发的回调数量是会非常惊人的，回调中又伴随着 DOM 操作，继而引发浏览器的重排与重绘，性能差的浏览器可能就会直接假死，这样的用户体验是非常糟糕的。...思考这样一个场景，对于浏览器窗口，每做一次 resize 操作，发送一个请求，很显然，我们需要监听 resize 事件，但是和 mousemove 一样，每缩小（或者放大）一次浏览器，实际上会触发 N...哪些时候对于连续的事件响应我们只需要执行一次回调？...后就算用户不停地点这个按钮，也只会最终发送一次；如果是 throttle 就会间隔发送几次 监听滚动事件判断是否到页面底部自动加载更多：给 scroll 加了 debounce 后，只有用户停止滚动后
而为了提高功能的易用性，页面本身就有一个监听，当用户按回车时，默认是触发表单的提交事件的，这样就有个冲突，当条码枪扫描条码后，即会触发录入商品信息的操作，之后又会触发表单的提交操作，而这，是我不希望看到的...在条码枪的时候，我不希望触发表单的提交动作。...在经过一些思考与尝试后，用以下的办法解决了，这里先说一下思路，代码稍后整理一下再贴上来：在扫描枪扫描一个条码后，触发的事件中，条码文本框本身的回车事件是会先触发的，继而再到页面的回车事件触发。...当鼠标焦点在条码输入框的时候，它的值一定是空的，而当它失去焦点时，我们可以人为让它的值为空，再当页面的回车触发时，我们就可以通过条码输入框的值是否为空也判断本次回车空间是由条码枪触发还是由用户按键盘触发了...后再清空值，在blur时，设置值为"条码枪录入",这样，在页面的回车监听时，就心中有数了。
当达到计时器的特定时间时，将调用onTimer(...)方法。在该调用期间，所有状态再次限定为创建计时器的key，允许计时器操纵keyed状态。...TimerService会使用key和timestamp对timer进行去重，也即是对于每一对key和timestamp仅仅会存在一个timer。...这两条消息定时器预计执行时间都超过了09:48:35,因为这个案例采用的是事件时间，而这六条元素最大的事件时间为09:48:35，所以默认到09:48:35就停止了 注意：看代码可以发现这里发送的元素之间是每隔...10秒发送，因为以为会影响结果，实际是我们使用的是EventTime,所以OnTimer被执行的时间，是看事件时间。...一开始没有设置为EventTime,所以在处理的时候还是以Process Time来处理的。 改完之后的效果： ?
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
云直播
