函数防抖和函数节流的区别
已被阅读 943 次 | 文章分类:javascript | 2021-02-14 14:46
简单说 这两种方式都可以提升前端性能，防止事件崩溃掉的方式；应用场景比如你绑定了滚动事件，那么如果不断滚动鼠标，重复的事件会一直执行；很容易浪费浏览器内存和性能，以至于浏览器崩溃;比如针对地图应用的话；如果在鼠标缩放地图时绑定了请求不同资源的事件，来回缩放鼠标，地图应用大概率会反映迟钝甚至挂掉；下面是如何通过延时函数 实现防抖和节流
一 函数防抖(debounce)
函数防抖的原理是每次执行前，清除上一个定时器；也就是在延时时间没到之前，如果再次触发交互，就会从此刻重新开始计时； 例如点击事件，延时1000ms执行用户相应；如果在延时内用户再次点击，那么清除前一个1000ms，从0重新开始计数，如果1000ms内 用户没有再触发交互，那么就执行点击的主体内容；
var timeout = null; //定义一个定时器
function debounce(){
clearTimeout(timeout); //清除这个定时器
timeout = setTimeout(()=>{
console.log(Math.random());
}, 1000);
}
全部代码如下
<!doctype HTML>
<html>
<head>
<meta charset="utf-8"></meta>
<style>
#main{
width: 200px;
height:200px;
overflow:auto;
border: 2px solid;
}
</style>
</head>
<body>
<div id="main">
</div>
<script>
var timeout = null; //定义一个定时器
function debounce(){
clearTimeout(timeout); //清除这个定时器
timeout = setTimeout(()=>{
console.log(Math.random());
}, 1000);
}
// 点击事件
let num=0;
document.getElementById('main').addEventListener('click', ()=>{
document.getElementById('main').innerHTML= num++;
debounce()
});
</script>
</body>
</html>
从中可以看出，点击div后1s会执行函数内容；但是如果一直点击，可能函数主体永远不会执行；因为定时器会被不断清空。
二 函数节流(throttle)
函数节流是在固定时间内只执行一次，而且肯定会执行一次； 例如1s内无论点多少次，都会按时执行一次；
var timer=null, isFinshed=true;
function throttle(){
if (isFinshed === true) {
isFinshed = false;
timer = setTimeout(() => {
console.log('鼠标单击');
isFinshed = true;
},1000);
}
}
全部代码及演示效果如下
<!doctype HTML>
<html>
<head>
<meta charset="utf-8"></meta>
<style>
#main{
width: 200px;
height:200px;
overflow:auto;
border: 2px solid;
}
</style>
</head>
<body>
<div id="main">
</div>
<script>
var timer=null, isFinshed=true;
function throttle(){
if (isFinshed === true) {
isFinshed = false;
timer = setTimeout(() => {
console.log('鼠标单击');
isFinshed = true;
},1000);
}
}
// 点击事件
let num=0;
document.getElementById('main').addEventListener('click', ()=>{
document.getElementById('main').innerHTML= num++;
throttle()
});
</script>
</body>
</html>
