防抖和节流的目的都是为了减少不必要的计算, 不浪费资源, 只在适合的时候再进行触发计算.
一, 函数节流
函数节流定义:
一个函数执行一次后, 只有大于设定的执行周期后才会执行第二次
有个需要频繁触发函数, 处于优化性能角度, 在规定时间内, 只让函数触发的第一次生效, 后面不生效
函数节流的原理:
用时间戳来判断是否已到回调该执行时间, 记录上次执行的时间戳, 然后每次触发 scroll 事件执行回调, 回调中判断当前时间戳距离上次执行时间戳的间隔是否已经到达 规定时间段, 如果是, 则执行, 并更新上次执行的时间戳
实际使用场景 :
典型的案例就是鼠标不断点击触发, 规定在 n 秒内多次点击只有一次生效.
resize,scroll,mousemove 等事件触发监听
实例代码:
- <script>
- /*fn: 要被节流的函数 delay: 规定的时间 */
- function throttle(fn,delay) {
- // 记录上一次函数 触发的时间
- var lastTime=0;
- return function () {
- // 当前函数 触发的时间
- var nowTime=Date.now();
- // 闭包中使用 lastTime 变量, 闭包会始终将变量的值保存在内存中
- if(nowTime-lastTime>delay){
- fn();
- // 同步时间 lastTime=nowTime;
- }
- }
- }
- // 实例: 每隔 200ms 触发一次节流函数
- document.onscroll=throttle(function () {
- console.log("scroll 事件被触发了"+Date.now());
- },200)
- </script>
二, 函数防抖
函数防抖:
一个需要频繁触发的函数, 在规定时间内, 只让最后一次生效, 前面的不生效
实现原理:
函数防抖的基本思想是设置一个定时器, 在指定时间间隔内运行代码时清楚上一次的定时器, 并设置另一个定时器, 知道函数请求停止并超过时间间隔才会执行.
实际应用场景:
典型的案例就是输入搜索: 输入结束后 n 秒才进行搜索请求, n 秒内又输入的内容, 就重新计时.
代码实现:
- <script>
- //fn: 需要防抖的函数
- // 防抖需要不停地清除计时器, 最后在计时器结束后触发 fn 来达到效果.
- function debounce(fn,delay) {
- // 记录上一次的延时器
- var timer=null;
- return function () {
- // 清除上一次延时器
- clearTimeout(timer)
- // 重新设置 新的延时器
- timer=setTimeout(function () {
- fn.apply(this);
- },delay)
- }
- }
- //test
- document.getElementById('btn').onclick=debounce(function () {
- console.log('点击事件被触发了'+Date.now())
- },1000)
- </script>
转载:
作者: fozero
来源: http://www.bubuko.com/infodetail-3166582.html