2019-08-13

JS函数节流和函数防抖

函数节流和函数防抖都是优化高频率执行JS代码的方法

函数节流

函数节流:是指JS代码在一定的时间内只能执行一次,就像人多少秒眨一次眼睛一样。
函数节流应用的实际场景,多数在监听页面元素滚动事件的时候会用到。

var canRun = true
document.getElementByID('scroll').onscroll=function(){
if(!canRun)return
canRun = false
var timeA =  setTimeout(()=>{
canRun = true
},1000)
}
//判断函数是否空闲,如空闲才会执行定时器代码

函数防抖

函数防抖是指代码在频繁触发时,只有在足够空闲的时间下才能执行,就像公交车在一定时间内,如果持续有乘客刷卡上车,那公交车必须等全部乘客上完车才能开车。
函数防抖的应用场景,最常见的就是用户注册时候的手机号码验证和邮箱验证了。只有等用户输入完毕后,前端才需要检查格式是否正确,如果不正确,再弹出提示语。

var timeB = false
var execute = function(){
clearTimeout(timeB) //清除上一个计时器
var timeB = setTimeout(()=>{
canRun = false
},1000)
}
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 浏览器事件循环机制 一、为什么JavaScript是单线程? JavaScript语言的一大特点就是单线程,也就是...
    问_道阅读 262评论 0 0
  • 挑选npm模块很费事?掌握这些技巧就能事半功倍! 前端之巅 2019-08-09 [图片上传失败...(image...
    吃火星的宝宝_9741阅读 304评论 0 0
  • 一.js基础 1.eval是做什么的? eval()是javascriptd的一个函数,它的功能是把对应的字符串解...
    因为凹凸曼阅读 173评论 0 0
  • Node.js 介绍 1.1 为什么要学习 Node.js 企业需求具有服务端开发经验更好front-endbac...
    程序猿李墨阅读 546评论 0 0
  • 目录 看完相关知识要记得手撸一边代码已经开始正式开发了...之后会在这些点上更上自己理解 kotlin与java的...
    kennychaos阅读 219评论 0 1