前言：函数防抖和函数节流都是用于优化高频率执行js的一种手段
节流
函数节流：是指一定时间内js方法只跑一次
应用场景：如resize,scroll在改变窗口和滚动的时候
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.wrap {
width: 200px;
height: 200px;
border: 1px solid red;
overflow-y: scroll;
margin-top: 50px;
}
.scroll {
height: 500px;
}
</style>
</head>
<body>
<div class="wrap" id="throttle">
<div class="scroll">函数节流</div>
</div>
</body>
</html>
<script>
let isPass = true;
let throttle = document.getElementById('throttle')
throttle.onscroll = () => {
if (!isPass) {
return;
}
isPass = false;
setTimeout(() => {
// 这里执行函数
console.log("函数节流")
isPass = true
}, 300);
}
</script>
ps:需要注意的是执行的间隔时间是>=300ms。如果具体执行的方法是包含callback的，也可以将isPass=true这一步放到callback中。
防抖
函数防抖：是指频繁触发的情况下，只有足够的空闲时间，才执行代码一次（点击后一次动作时候会将前一次的给清空掉）
应用场景：如resize,scroll在改变窗口和滚动的时候
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.wrap {
width: 200px;
height: 200px;
border: 1px solid red;
overflow-y: scroll;
margin-top: 50px;
}
.scroll {
height: 500px;
}
</style>
</head>
<body>
<div class="wrap" id="debounce">
<div class="scroll">函数防抖</div>
</div>
</body>
</html>
<script>
let timer = null;
let debounce = document.getElementById('debounce')
debounce.onscroll = () => {
// 清除未执行的代码,重新执行动作
clearTimeout(timer);
timer = setTimeout(() => {
//这里执行函数
console.log('函数防抖')
}, 300);
}
</script>
网友评论