在处理高频事件,相似于window的resize或者scorll,或者input输入校验等操做时。若是直接执行事件处理器,会增大浏览器的负担,严重的直接卡死,用户体验很是很差。前端
面对这种状况,咱们通常能够采用防抖和节流的方式减小调用频率。同时也不会影响实际效果。程序员
防抖的做用是:在事件被触发的n秒后执行回调,若是在这n秒内又被触发,则从新计时。浏览器
常见场景:函数
input校验:在input输入完成后,不需进行额外操做(好比:点击按钮,或者blur事件),而是须要敲完代码经过keydown事件触发校验程序。此时若是不做处理,会致使校验程序频繁触发,影响用户体验。this
此时可使用防抖来解决这个问题。代码以下:spa
<input type="text" onkeydown="checkout(this)" /> <script> var timer = null // 防抖:当持续时间触发时。必定时间内没有再触发事件,事件处理函数才会执行一次 function debounce (fn, delay) { clearTimeout(timer) timer = setTimeout(fn, delay) } // 校验方法在 1秒内 无操做后执行 function checkout (input) { debounce(function(){ ifCompliance(input.value) },1000) } // 校验方法,长度小于 7 不规范 function ifCompliance (val) { if(val && val.length < 7){ alert("不符合规范") } } </script>
节流的做用是:在一个单位时间内,只能触发一次函数。若是这个单位时间内触发屡次函数,只有一次生效。日志
常见场景:code
若是在一个页面中有不少张图片,就可能会使用懒加载技术,即监听滚动条的改变,而加载图片。为了不一直触发滚动事件的处理程序,可使用节流。事件
节流 demo 以下:图片
// 打印 scroll 的日志 function scrollLog () { console.log('scrollLog') } // 节流:持续触发事件时,规定在必定时间内只会发生一次。 function throttle (fn, delay) { var startTime = Date.now() return function () { var curTime = Date.now() var remain if (curTime - startTime >= delay) { fn && fn() startTime = Date.now() } } } window.addEventListener('scroll', throttle(scrollLog, 1000))
防抖和节流的小知识就到这里,若是对你有帮助还请点个赞。
最近在搞一个和前端程序员相关的公号,除了技术分享以外,也增长了对于职业发展、生活记录之类的文章,欢迎你们关注,一块儿聊天、吐槽,一块儿努力工做,认真生活!