前端面试必备：彻底搞懂防抖和节流及其应用场景
防抖和节流
函数节流和函数防抖，两者都是优化高频率执行js代码的一种方法
防抖（debounce）：在一段时间内只要不是最后一次触发就不会发送异步请求（定时器实现）。
节流（throttle）：只要第一次请求发送后，响应没回来前，就不能发送第二次请求（开关变量实现）。
防抖
现象
看下以下代码（模拟客户端向服务器发送请求）：
window.onscroll = function () {console.log("发送agax请求，加载更多...");
};
可以看到，我仅仅向下滑动了3次，向上滑动了三次就发出了将近70次请求。
解决
提前准备一个定时器，每次触发事件时都去看看定时器是不是空，不是的话取消之前的定时器，是的话就开始新一轮的等待。
var timer;
window.onscroll = function () {
//如果当前timer不是空，说明前边有一个等待的请求还未发送，还未发送。就停止前面的等待，if (timer !== undefined) {clearTimeout(timer);}
// 从新开始下一轮的等待timer = setTimeout(function () {// 只有当200ms内未发生滚动是才发送正式的ajax请求;console.log("发送agax请求，加载更多...");}, 200);
};
节流
现象
看下以下代码（模拟客户端向服务器发送请求）：
<body style="height: 2000px"><buttonid="btn"style="position: fixed; right: 0; bottom: 200px"onclick="clickMe()">加载更多 </button><script>var btn = document.getElementById("btn");btn.onclick = function () {console.log("发送请求加载更多数据....");console.log("加载完成"); };</script></body>
可以发现如果不加以限制的话，快速点击，也会发出很多请求
解决
提前准备一个开关变量，当第一次点击发送请求时，允许发送，但是要把开关关闭，点击不再发送请求，直到请求回来后把开关打开，这次又能重新发送请求。
<body style="height: 2000px"><buttonid="btn"style="position: fixed; right: 0; bottom: 200px"onclick="clickMe()">加载更多 </button><script>var canClick = true;var btn = document.getElementById("btn");btn.onclick = function () {// 如果当前开关开着说明可以单击if (canClick) {// 先关闭开关canClick = false; // 再发送请求console.log("发送请求加载更多数据....");// setTimeout(function () {console.log("加载完成"); // 在请求的回调函数结尾重新打开开关允许再次单击发送请求canClick = true;// }, 3000);} else {}};</script></body>
防抖节流应用场景
防抖
-
搜索框搜索输入。
即在用户停止输入一段小时间后才会发送请求，如果在这一小段时间用户继续输入则重新计时。
-
窗口大小调节。
窗口调整完成后一小段时间进行渲染，如果在这一小段时间内又进行了调整，则重新计时，直到计时结束进行渲染。
节流
-
高频率点击提交按钮。
在一小段时间内，高频率点击提交按钮，只发送第一次请求，等到请求回来后，再点击提交按钮才会再次发送请求。
-
滚动加载，加载更多或者滚动到底部自动加载
在一小段时间内，滚动加载、加载更多或者滚动到底部自动加载，只在第一次滚动发送请求，等到请求回来后，再点击提交按钮才会再次发送请求。
其实滚动加载也可使用防抖，即在用户停止滚动一段小时间后才会发送请求，如果在这一小段时间用户继续滚动则重新计时。以上防抖中的案例就是采用防抖来解决的。
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！