函数防抖和函数节流
2018-07-23 22:57
369 查看
1、函数防抖
函数防抖是指频繁触发的情况下，只有足够的时间，才执行代码一次，函数防防抖的要点也是要一个setTimeout来辅助实现，延迟执行需要跑的代码。如果方法多次触发，则把上次记录的延迟执行代码用clearTimeout清理掉，重新开始。如果计时完毕，没有方法来访问触发。则执行代码。
函数防抖的应用场景，最常见的就是用户注册时候的手机号码验证和邮箱验证了。只有等用户输入完毕后，前端才需要检查格式是否正确，如果不正确，再弹出提示语
2、函数节流
函数节流是指一定时间内js方法只跑一次，函数节流的要点是，声明一个变量当标志位，记录当前代码是否在执行。 如果空闲，则可以正常触发方法执行，如果代码正在执行，则取消这次方法执行，直接return。
函数节流应用的实际场景，多数在监听页面元素滚动事件的时候会用到。因为滚动事件，是一个高频触发的事件。
[code]<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#box{
height: 1000px;
width: 1000%;
background-color: skyblue;
}
</style>
</head>
<body>
<div id="box"></div>
<script type="text/javascript">
//函数防抖
/*var timer = false;
window.onscroll = function(){
clearTimeout(timer);//// 清除未执行的代码，重置回初始化状态
timer = setTimeout(function() {
console.log("这是函数防抖")
}, 100);
}*/
//函数节流
var timer = true;
window.onscroll = function(){
if(!timer){ // 判断是否已空闲，如果在执行中，则直接return
return;
}
timer = false;
setTimeout(function(){
console.log("这是函数节流");
timer = true;
},300);
}
</script>
</body>
</html>
阅读更多
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 