说完防抖，下面我们讲讲节流，规矩就不说了，先上代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>节流</title>
</head>
<body>
<button id="throttle">点我节流！</button>
<script>
window.onload = function() {
// 1、获取按钮，绑定点击事件
var myThrottle = document.getElementById("throttle");
myThrottle.addEventListener("click", throttle(sayThrottle));
}
// 2、节流函数体
function throttle(fn) {
// 4、通过闭包保存一个标记
let canRun = true;
return function() {
// 5、在函数开头判断标志是否为 true，不为 true 则中断函数
if(!canRun) {
return;
}
// 6、将 canRun 设置为 false，防止执行之前再被执行
canRun = false;
// 7、定时器
setTimeout( () => {
fn.call(this, arguments);
// 8、执行完事件（比如调用完接口）之后，重新将这个标志设置为 true
canRun = true;
}, 1000);
};
}
// 3、需要节流的事件
function sayThrottle() {
console.log("节流成功！");
}
</script>
</body>
</html>
很好，看完代码的小伙伴应该大致清楚是怎么回事了，下面我们看 GIF 实现：
看完代码和 GIF 实现，我们可以明白，节流即是：
- 节流：指定时间间隔内只会执行一次任务。
那么，节流在工作中的应用？
- 懒加载要监听计算滚动条的位置，使用节流按一定时间的频率获取。
- 用户点击提交按钮，假设我们知道接口大致的返回时间的情况下，我们使用节流，只允许一定时间内点击一次。
这样，在某些特定的工作场景，我们就可以使用防抖与节流来减少不必要的损耗。
那么问题来了，假设面试官听到你这句话，是不是会接着问一句：“为什么说上面的场景不节制会造成过多损耗呢？”
OK，这就涉及到浏览器渲染页面的机制了……
案例2：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>demo</title>
</head>
<body>
<input type="text" name="search">
<script type="text/javascript">
var searchInput = document.querySelector(‘input[name="search"]‘);
/*绑定事件*/
searchInput.addEventListener(‘keyup‘,throttle(getInputValue),false);
/* 节流函数 */
function throttle(fn){
/*通过闭包保存一个标记*/
let timer = true;
return function(){
/*在函数开头判断标志是否为 true，不为 true 则中断函数*/
if(!timer){
return;
}
/*将 timer 设置为 false，防止执行之前再被执行*/
timer = false;
/* 定时器 */
setTimeout(()=>{
fn.call(this,arguments)
/*执行完事件（比如调用完接口）之后，重新将这个标志设置为 true*/
timer = true;
},1000)
}
}
/* 调用获取输入值 */
function getInputValue(){
console.dir(this.value)
}
</script>
</body>
</html>
.
原文地址：https://www.cnblogs.com/jianxian/p/12077570.html
时间： 2024-10-09 05:25:44