防抖和节流

2019独角兽企业重金招聘Python工程师标准>>>

实际工作中，我们经常性的会通过监听某些事件完成对应的需求，比如：

1. 通过监听 scroll 事件，检测滚动位置，根据滚动位置显示返回顶部按钮
2. 通过监听 resize 事件，对某些自适应页面调整DOM的渲染（通过CSS实现的自适应不再此范围内）
3. 通过监听 keyup 事件，监听文字输入并调用接口进行模糊匹配

函数防抖：

定义：多次触发事件后，事件处理函数只执行一次，并且是在触发操作结束时执行。

原理：对处理函数进行延时操作，若设定的延时到来之前，再次触发事件，则清除上一次的延时操作定时器，重新定时。

var timer = null;

function debounce(cb, delay = 200) {

var _this = this;

return function () {

if (timer) {

clearTimeout(timer);

}

timer = setTimeout(function () {

cb.call(_this);

},

delay)

}

}

函数节流：

定义：触发函数事件后，短时间间隔内无法连续调用，只有上一次函数执行后，过了规定的时间间隔，才能进行下一次的函数调用。

原理：对处理函数进行延时操作，若设定的延时到来之前，再次触发事件，则清除上一次的延时操作定时器，重新定时。

Function.prototype.throttling = function (cb, delay) {

var start, timer, end;

var _this = this;

return function loop() {

end = Date.now();

if (!start) {

start = end;

}

if (timer) {

clearTimeout(timer);

}

if (end - start > delay) {

cb.call(_this);

start = end;

} else {

timer = setTimeout(function () {

loop.call(_this);

}, 50)

}

 

}

}

测试滚动事件

window.onscroll = Function.prototype.throttling(function () {

var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

console.log('滚动距离' + ':' + scrollTop);

}, 1000);

转载于:https://my.oschina.net/u/3878260/blog/1826133