针对一些会频繁触发的事件如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)相关推荐

  1. 防抖debounce和节流throttle

    大纲 一.出现缘由 二.什么是防抖debounce和节流throttle 三.应用场景 3.1防抖 3.2节流 一.出现缘由 前端开发中,有一部分用户行为会频繁触发事件,而对于DOM操作,资源加载等耗 ...

  2. 函数防抖(debounce)和节流(throttle)在H5编辑器项目中的应用

    函数防抖(debounce)和节流(throttle)在H5编辑器项目中的应用 文章目录 函数防抖(debounce)和节流(throttle)在H5编辑器项目中的应用 1. 为什么要防抖节流 1.1 ...

  3. 探究防抖(debounce)和节流(throttle)

    本文来自我的博客,欢迎大家去GitHub上star我的博客 本文从防抖和节流出发,分析它们的特性,并拓展一种特殊的节流方式requestAnimationFrame,最后对lodash中的deboun ...

  4. Java版的防抖(debounce)和节流(throttle)

    概念 防抖(debounce) 当持续触发事件时,一定时间段内没有再触发事件,事件处理函数才会执行一次,如果设定时间到来之前,又触发了事件,就重新开始延时 节流(throttle) 当持续触发事件时, ...

  5. 函数防抖(debounce)和节流(throttle)以及lodash的debounce源码赏析

    函数节流和去抖的出现场景,一般都伴随着客户端 DOM 的事件监听.比如scroll resize等事件,这些事件在某些场景触发非常频繁. 比如,实现一个原生的拖拽功能(不能用 H5 Drag& ...

  6. 手写防抖(debounce)和节流(throttle)

    目录 测试代码 防抖(debounce) 基本功能实现 添加参数及this指向功能 第一次立即执行功能 取消功能 节流(throttle) 基本功能实现 增加this执向 最后一次在禁止时间段内是否执 ...

  7. 函数防抖debounce和节流throttle

    debounce 函数防抖 1.什么是函数防抖 函数防抖是优化高频率执行 js 代码的一种手段 可以让被调用的函数在一次连续的高频率操作过程中只被调用一次 2.函数防抖的作用 减少代码执行次数,提升网 ...

  8. 防抖(debounce) 和 节流(throttling)

    防抖和节流是针对响应跟不上触发频率这类问题的两种解决方案. 在给DOM绑定事件时,有些事件我们是无法控制触发频率的. 如鼠标移动事件onmousemove, 滚动滚动条事件onscroll,窗口大小改 ...

  9. 防抖(debounce) 和 节流(throttling)的封装使用-最终发布npm

    函数的防抖节流 前言 防抖函数 防抖函数(雏形) 防抖函数1.0(使用了闭包) 防抖函数2.0(此版本开始才称得上是封装) 防抖函数3.0(希望第一次点击就立即触发) 防抖函数4.0(解决this指向 ...

最新文章

  1. Linux学习(十二)---RPM和YUM
  2. UISegmentedControl (待续)
  3. python异常捕获_Python-异常捕捉
  4. Beetlex之websocket/tls服务压测工具
  5. Aaron Stannard谈Akka.NET 1.1
  6. mysql写入监控_zabbix 自定义key 监控mysql增删查改
  7. Mysql 如果有多个可选条件怎么加索引_MySQL|mysql-索引
  8. 信息安全工程师笔记-综合知识冲刺(一)
  9. jqueryui时间插件_满足您所有日历要求的jQueryUI Datepicker插件
  10. 怎么从服务器传输信息,大神们socket如何连接到服务器并判断从服务器传送回来的数据 谢谢谢谢 跪求啊 急用...
  11. switch and router
  12. C# 6 与 .NET Core 1.0 高级编程 - 38 章 实体框架核心(上)
  13. mysql怎么设主键和外键_MySQL添加主键和外键
  14. 图片识别——均值哈希算法
  15. 计算机网络---计算机网络体系结构与参考模型
  16. Elasticsearch 基于地理位置的搜索查询
  17. python gui编程for mac_Python IDE 开发软件-PyCharm pro for Mac
  18. 【全志T113-S3_100ask】4G模块EC200A的使用
  19. doc转pdf java不失真,java doc转PDF
  20. 【科学文献计量】CSSCI数据采集,转化为python中的DataFrame格式,并存放到MySQL数据库

热门文章

  1. php手机黑屏不定位,手机不锁屏怎么设置
  2. 一个好网站的策划设计
  3. CSMAR数据库券商名称简写归类
  4. CMNET和CMWAP网络连接
  5. android 关闭硬件加速
  6. Linux相关知识的第四回合
  7. Could not find an activated virtualenv (required)解决方案
  8. JAVA中线程中的异步和同步
  9. 6月21日科技资讯|苹果召回6.3万台MacBook Pro;罗永浩回应“收购苹果”;新版Edge支持Windows 7/8
  10. 2017广东工业大学程序设计竞赛决赛相关总结