面试之函数节流和函数防抖

从场景说起

滑动到底部继续加载，是移动端很常见的一种场景。

通常来说，我们会在对可滑动区域（一般是window）的scroll事件做监听，判断距离底部还有多远，如果距离底部较近，则发起HTTP请求，请求下一页的数据。

很容易写出这样的代码：

let page = 0;
document.querySelector('.main').addEventListener('scroll', () => {
 scrollMore(this);
})
// 滑动获取更多内容
function scrollMore(el) {
 if (getScrollTop(el) + getClientHeight() >= getScrollHeight(el) - 100) {
 fetch('http://api.jd.com/somethings/' + page++)
 .then(function(response) {
 console.log(response.json());
 // do something 把数据填充到页面上
 })
 }
}
function getScrollTop(el) { //取窗口滚动条高度
 return el.scrollTop;
}
function getClientHeight() { //取窗口可视范围的高度
 let clientHeight = 0;
 if (document.body.clientHeight && document.documentElement.clientHeight) {
 clientHeight = (document.body.clientHeight < document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight;
 } else {
 clientHeight = (document.body.clientHeight > document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight;
 }
 return clientHeight;
}
function getScrollHeight(el) { //取文档内容实际高度
 return Math.max(document.body.scrollHeight, el.scrollHeight);
}

但是这样很容易就发现一个问题，触发的scroll事件太频繁了，在一些低端机上，可能会卡顿。

其实我们的判断没有必要这么频繁，用户的滑动操作是一段时间内不停触发的。

我们希望在一小段时间内，只触发一次执行。

函数节流

这就是函数节流要做的事情，《JavaScript高级程序设计》中给了一个方法：

function throttle (method, context) {
 clearTimeout(method.tId);
 method.tId = setTimeout(function () {
 method.call(context);
 }, 100)
}

这个代码的原理就是在多次执行的时候，清除上一次的timeout，如果时间间隔没有超过100ms，则又新建一个新的timeout，旧的则被丢弃。

考虑一下，如果在一段时间内，每隔99ms触发一次，那么不停地清除上一次的timeout，函数将永远不会执行。

我们更希望，每隔100ms，函数就执行一次，而不是像现在一样。

重新思考这个问题。

关键点有两个：

间隔
执行
先来把函数封装一下，将节流函数return出来：

function throttle1 (method, delay) {
 let timer = null;
 return function () {
 let
 context = this
 ;
 if (timer) clearTimeout(timer);
 timer = setTimeout(() => {
 method.call(context);
 }, delay)
 }
 }
加上间隔判定：
function throttle2 (method, delay) {
 let timer = null;
 let start;
 return function () {
 let
 context = this
 , current = Date.now()
 ;
 if (timer) clearTimeout(timer);
 if (!start) {
 start = current;
 }
 if (current - start >= delay) {
 method.call(context);
 start = current;
 } else {
 timer = setTimeout(() => {
 method.call(context);
 }, delay)
 }
 }
 }

这样，基本上完成了一个throttle函数。

函数防抖

防抖的场景也比较常见。

比如搜索时，监听用户输入，提供联想词；或者用户连续点击提交按钮的场景。

说实话，我感觉《高级》那本书里的节流例子，就是一个防抖的版本。

几乎可以拿来就用。

我们还是做一个比较完善的版本。

function debounce (method, delay) {
 let timeout = null;
 return function () {
 clearTimeout(timeout);
 timeout = setTimeout(() => {
 method.apply(this, arguments);
 }, delay);
 };
 }

本次给大家推荐一个最后给大家推荐一个免费的学习群，里面概括移动应用网站开发，css，html，webpack，vue node angular以及面试资源等。
对web开发技术感兴趣的同学，欢迎加入Q群：864305860，不管你是小白还是大牛我都欢迎，还有大牛整理的一套高效率学习路线和教程与您免费分享，同时每天更新视频资料。
最后，祝大家早日学有所成，拿到满意offer，快速升职加薪，走上人生巅峰。

面试之函数节流和函数防抖

猜你喜欢