前端函数防抖(debounce)和函数节流(throttle)

防抖&节流

在前端开发中一部分的用户行为会频繁的出发事件执行，对DOM操作、资源加载等耗费性能的处理，很可能导致界面卡顿，甚至浏览器的崩溃。函数防抖(debounce)和函数节流(throttle)就是为了解决类似的需求应运而生的。

 

• 防抖

函数防抖就是在函数需要频繁触发情况时，只有足够空闲的时间，才执行一次。好像公交车司机会等全部人上车后才出站一样。

 

应用场景：实时搜索（keyup）、拖拽（mousemove）

 

var input = document.getElementsByTagName('input')[0]; var timer = null; function ajax() { console.log(this.value); } input.oninput = function () { 　　var _self = this,
 _arg = arguments;
　　clearTimeout(timer);
　　timer = setTimeout(function () {
　　　　ajax.apply(_self, _arg);
　　}, 1000);
 }

 

封装防抖函数

function debounce(handler, delay) { var timer = null; return function () { var _self = this, _arg = arguments; clearTimeout(timer); timer = setTimeout(function () { handler.apply(_self, _arg); }, delay); } }

 

• 节流

函数节流就是预定一个函数只有在大于等于执行周期时才执行，周期内调用不执行。好像水滴攒到一定重量才会落下。

 

应用场景：窗口调整(resize)、页面滚动(scroll)、抢购疯狂点击(mousedowm)

 

function throttle(handler, wait) { var lastTime = 0; return function () { var nowTime = new Date().getTime(); if (nowTime - lastTime > wait) { handler.apply(this, arguments); lastTime = nowTime; } } }