防抖(debounce)和节流(throttle)
针对一些会频繁触发的事件如scroll、resize,如果正常绑定事件处理函数的话,有可能在很短的时间内多次连续触发事件,十分影响性能。防抖和节流就是针对响应跟不上触发频率这类问题的两种解决方案
因此针对这类事件要进行防抖动或者节流处理(通过防抖/节流控制触发频率,防止一个事件频繁触发回调函数)
防抖动(debounce )
特点:当事件快速连续不断触发时,动作只会执行一次。
用法:限制下次函数调用之前必须等待的时间间隔
本质:将多次执行变为最后一次执行
//窗口大小调整完毕后,在执行resize事件中的代码,通过闭包
window.onresize=debouce();
function getClient(){var winH = document.documentElement.clienHeight;var winW = document.documentElement.clienwidth;console.log(winH,winW);
}function debouce(){var timer;return function(){if (timer){ //如果有定时器,就清除clearTimeout(timer);}timer = setTimeout(getClient,2000); //再设置定时器 在resize事件结束的两秒后执行一次getCliten()}
}
节流阀(throttle )
比如在页面的无限加载场景下,我们需要用户在滚动页面时,每隔一段时间发一次 Ajax 请求,而不是在用户停下滚动页面操作时才去请求数据。这样的场景,就适合用节流阀技术来实现。
特点:在连续高频触发事件时,动作会被定期执行,响应平滑,使得一定时间内只触发一次函数
本质:将多次执行变为每隔一段时间执行
//拖动滚动条时,每隔几秒才执行一次事件内容,通过闭包
window.onscroll = throttle();
function getScroll(){var winT = document.documentElement.scrollTop;console.log(winT);
}function throttle(){var timer;return function(){if(!timer){ //如果没有定时器,设置定时器setTimeout(function(){getSrollT();timer=null; //执行scroll事件后 执行一次getScroll() 再取消定时器},2000); //2s后再进入判断 设置定时器}}
}
共同点
都是用来做性能优化,都利用延迟定时器
区别
节流函数不管事件触发有多频繁,都会保证在规定时间内一定会执行一次真正的事件处理函数, 而防抖动只是在最后一次事件后才触发一次函数。
总结
如果事件触发是高频但是有停顿时,可以选择debounce,动作只被执行一次
在事件连续不断高频触发时,选择throttling,动作每隔一段时间执行一次
防抖(debounce)和节流(throttle)相关推荐
- 防抖debounce和节流throttle
大纲 一.出现缘由 二.什么是防抖debounce和节流throttle 三.应用场景 3.1防抖 3.2节流 一.出现缘由 前端开发中,有一部分用户行为会频繁触发事件,而对于DOM操作,资源加载等耗 ...
- 函数防抖(debounce)和节流(throttle)在H5编辑器项目中的应用
函数防抖(debounce)和节流(throttle)在H5编辑器项目中的应用 文章目录 函数防抖(debounce)和节流(throttle)在H5编辑器项目中的应用 1. 为什么要防抖节流 1.1 ...
- 探究防抖(debounce)和节流(throttle)
本文来自我的博客,欢迎大家去GitHub上star我的博客 本文从防抖和节流出发,分析它们的特性,并拓展一种特殊的节流方式requestAnimationFrame,最后对lodash中的deboun ...
- Java版的防抖(debounce)和节流(throttle)
概念 防抖(debounce) 当持续触发事件时,一定时间段内没有再触发事件,事件处理函数才会执行一次,如果设定时间到来之前,又触发了事件,就重新开始延时 节流(throttle) 当持续触发事件时, ...
- 函数防抖(debounce)和节流(throttle)以及lodash的debounce源码赏析
函数节流和去抖的出现场景,一般都伴随着客户端 DOM 的事件监听.比如scroll resize等事件,这些事件在某些场景触发非常频繁. 比如,实现一个原生的拖拽功能(不能用 H5 Drag& ...
- 手写防抖(debounce)和节流(throttle)
目录 测试代码 防抖(debounce) 基本功能实现 添加参数及this指向功能 第一次立即执行功能 取消功能 节流(throttle) 基本功能实现 增加this执向 最后一次在禁止时间段内是否执 ...
- 函数防抖debounce和节流throttle
debounce 函数防抖 1.什么是函数防抖 函数防抖是优化高频率执行 js 代码的一种手段 可以让被调用的函数在一次连续的高频率操作过程中只被调用一次 2.函数防抖的作用 减少代码执行次数,提升网 ...
- 防抖(debounce) 和 节流(throttling)
防抖和节流是针对响应跟不上触发频率这类问题的两种解决方案. 在给DOM绑定事件时,有些事件我们是无法控制触发频率的. 如鼠标移动事件onmousemove, 滚动滚动条事件onscroll,窗口大小改 ...
- 防抖(debounce) 和 节流(throttling)的封装使用-最终发布npm
函数的防抖节流 前言 防抖函数 防抖函数(雏形) 防抖函数1.0(使用了闭包) 防抖函数2.0(此版本开始才称得上是封装) 防抖函数3.0(希望第一次点击就立即触发) 防抖函数4.0(解决this指向 ...
最新文章
- Linux学习(十二)---RPM和YUM
- UISegmentedControl (待续)
- python异常捕获_Python-异常捕捉
- Beetlex之websocket/tls服务压测工具
- Aaron Stannard谈Akka.NET 1.1
- mysql写入监控_zabbix 自定义key 监控mysql增删查改
- Mysql 如果有多个可选条件怎么加索引_MySQL|mysql-索引
- 信息安全工程师笔记-综合知识冲刺(一)
- jqueryui时间插件_满足您所有日历要求的jQueryUI Datepicker插件
- 怎么从服务器传输信息,大神们socket如何连接到服务器并判断从服务器传送回来的数据 谢谢谢谢 跪求啊 急用...
- switch and router
- C# 6 与 .NET Core 1.0 高级编程 - 38 章 实体框架核心(上)
- mysql怎么设主键和外键_MySQL添加主键和外键
- 图片识别——均值哈希算法
- 计算机网络---计算机网络体系结构与参考模型
- Elasticsearch 基于地理位置的搜索查询
- python gui编程for mac_Python IDE 开发软件-PyCharm pro for Mac
- 【全志T113-S3_100ask】4G模块EC200A的使用
- doc转pdf java不失真,java doc转PDF
- 【科学文献计量】CSSCI数据采集,转化为python中的DataFrame格式,并存放到MySQL数据库
热门文章
- php手机黑屏不定位,手机不锁屏怎么设置
- 一个好网站的策划设计
- CSMAR数据库券商名称简写归类
- CMNET和CMWAP网络连接
- android 关闭硬件加速
- Linux相关知识的第四回合
- Could not find an activated virtualenv (required)解决方案
- JAVA中线程中的异步和同步
- 6月21日科技资讯|苹果召回6.3万台MacBook Pro;罗永浩回应“收购苹果”;新版Edge支持Windows 7/8
- 2017广东工业大学程序设计竞赛决赛相关总结