JavaScript函数节流和函数防抖
2017-11-22 本文已影响27人
madpluto
函数节流和函数防抖，两者都是优化高频率执行js代码的一种手段.在一定时间内，代码执行的次数不一定要非常多。达到一定频率就足够了。
函数节流是指一定时间内js方法只跑一次。比如人的眨眼睛，就是一定时间内眨一次。函数节流应用的实际场景，多数在监听页面元素滚动事件的时候会用到。
函数防抖是指频繁触发的情况下，只有足够的空闲时间，才执行代码一次。函数防抖的应用场景，最常见的就是用户注册时候的手机号码验证和邮箱验证，只有等用户输入完毕后，前端才需要检查格式是否正确，
函数节流的要点是，声明一个变量记录当前代码是否在执行。如果空闲，则可以正常触发方法执行。如果代码正在执行，则取消这次方法执行，直接return。
函数防抖的要点，也是需要一个setTimeout来辅助实现。延迟执行需要跑的代码。如果方法多次触发，则把上次记录的延迟执行代码用clearTimeout清掉，重新开始。如果计时完毕，没有方法进来访问触发，则执行代码。
//示例代码
<html>
<head>
<meta charset="utf-8">
<title>函数防抖</title>
<style>
.demo{width: 200px;height:200px;border: 1px solid red;overflow-y:scroll;margin-top:50px}
.scroll{height: 1000px;}
</style>
</head>
<body>
<div class="wrap">
<div id="putong" class="demo">
普通滚动
<div class="scroll"></div>
</div>
<div id="jieliu" class="demo">
函数节流
<div class="scroll"></div>
</div>
<div id="fangdou" class="demo">
函数防抖
<div class="scroll"></div>
</div>
</div>
<script>
document.getElementById('putong').onscroll = function() {
console.log('普通滚动')
}
var canRun = true;
document.getElementById("jieliu").onscroll = function(){
if(!canRun){
// 判断是否已空闲，如果在执行中，则直接return
return;
}
canRun = false;
setTimeout(function(){
console.log("函数节流");
canRun = true;
}, 300);
};
var timer = false;
document.getElementById("fangdou").onscroll = function(){
clearTimeout(timer);
timer = setTimeout(function(){
console.log("函数防抖");
}, 300);
}
</script>
</body>
</html>
