debounce 与throttle
背景
开发过程中我们会遇到一些场景，事件频繁被触发，导致频繁的DOM操作等，导致UI卡顿 甚至浏览器崩溃等。
1、window对象的resize、scroll 事件
2、拖拽时的mousemove事件
3、input的change、keyup事件等
4、游戏中的mousedown、keydown事件
5、发送请求按钮为了防止用户不停的点击
解决方案
这些场景我们会对他做节流处理，也就是说一段时间内触发的事件我们的函数只执行一次。throttle和debounce 都可以帮我们在一段时间内防止函数被多次调用。下面来聊一下debounce 和 throttle 这两种解决方案。
先查了一下这两个单词的英文意思，debounce：去抖；防反跳， throttle: 节流。
debounce：
当调用动作n毫秒后，才会执行该动作。如果这n毫秒内又调用该动作，则重新计算时间。
例如：一个点击事件，用了debounce，点击事件被执行直到你停止点击 n毫秒后。
throttle：
当调用动作被触发，立即执行，但是这n毫秒内，再次触发不会被执行。也就是说一个执行周期（n毫秒）内最多只能执行一次。
举个?：
页面存在一个按钮，点击时会触发点击事件。用throttle和debounce 做优化，设置执行周期为1000ms。然后不停的点击按钮。则：
debounce(handleClick, 1000) //只会执行一次，在最后一次点击完1000ms后
throttle(handleClick, 1000) //第一次点击立即执行一次，1000ms后如果再被点击则再执行
使用场景：
debounce：
1、input change时 自动发送ajax请求
2、window resize时重新计算样式或布局
throttle：
1、scroll 时更新页面
2、防止用户疯狂点击按钮，而触发事件
平时比较常用还是throttle。
debounce 与throttle相关推荐
- 白话debounce和throttle
遇到的问题 在开发过程中会遇到频率很高的事件或者连续的事件,如果不进行性能的优化,就可能会出现页面卡顿的现象,比如: 鼠标事件:mousemove(拖曳)/mouseover(划过)/mouseWhe ...
- Debounce 和 Throttle 的原理及实现
在处理诸如 resize.scroll.mousemove 和 keydown/keyup/keypress 等事件的时候,通常我们不希望这些事件太过频繁地触发,尤其是监听程序中涉及到大量的计算或者有 ...
- debounce和throttle
性能和速度是程序的敌人,以致于每一个优秀的程序员都在孜孜不倦的提升软件的性能和速度,从而提升产品的用户体验. 下面介绍的是debounce和throttle,这两种技术能够改善程序的性能,它们非常相似 ...
- debounce vs throttle
debounce vs throttle debounce假设你正在乘电梯上楼,当电梯门关闭之前发现有人也要乘电梯,礼貌起见,你会按下开门开关,然后等他进电梯:如果在电梯门关闭之前,又有人来了,你会继 ...
- 浅析Debounce 与 Throttle的区别
文章目录 概述 Debounce 瞬时响应or延迟响应 举例与注意事项 Throttle 定义 用法举例 参考文章 这两天在学习前端知识,在Vue的官方教程中看到了这两个概念,查阅相关资料后,做以下整 ...
- 前端间隔查询的两种方法：Debounce和Throttle
Debounce 中文名:防抖.在开始操作了之后,那么只有在一段 delay 时间段后不再有操作了,才执行操作. Throttle 中文名:节流.在开始操作之后,在 delay ms 内只会做一次.会 ...
- debounce与throttle区别
在2011年,Twitter网站曾爆出一个问题:在主页往下滚动时,页面会变得缓慢以致没有响应.John Resig发表了一篇文章< a blog post about the problem&g ...
- debounce、throttle、useDebounce、useThrottle
直接使用lodash的debounce会出现以下报错信息 This synthetic event is reused for performance reasons. If you're seein ...
- throttle与debounce的区别
前几天看到一篇文章,我的公众号里也分享了<一次发现underscore源码bug的经历以及对学术界拿来主义的思考>具体文章详见,微信公众号: 文中讲了大家对throttle和debounc ...
最新文章
- java中字符与字节的编码关系
- 省市县级联查询无刷新（转）
- 《实施Cisco统一通信管理器（CIPT2）》一1.6 拨号计划方面面临的挑战
- 除了数据属性，Vue 实例还提供了一些有用的实例属性与方法。它们都有前缀 $，以便与用户定义的属性区分开来。
- 记录一个需求：折线图，要求指定年份每一天的记录
- 计算机网络学习笔记-1.2.3第一章总结
- dedeCMS 静态页面的倒计时插件（原生VS自定义）
- linux 中断 c语言程序,linux驱动之中断处理过程C程序部分
- HTML将广告关闭的JS代码,原生js对联广告代码制作浮动固定层可关闭对联广告横幅...
- java 中文繁体转换简体
- css3 cale()属性介绍以及自适应布局使用方法
- Google谷歌地图基础
- linux常用重启命令,linux常用关机和重启命令
- 电视为何降价至200元依然没人买？爱奇艺给出了答案
- 计算机丢失fine,FineRecovery(文件恢复删除)4.29
- VS Code中常用插件
- hiveserver2 和beeline_Beeline连接Hiveserver2错误
- 微软 Azure人工智能认知服务打造语音提醒喝水助手（带源码和演示地址）
- Android新的网络请求框架volley源码解释及示例
- uview u-popup设置背景透明