什么是函数防抖(debounce)?
函数防抖是优化高频率执行js的一种手段
可以让被调用的函数在一次高频操作的过程中只被调用一次
函数防抖的作用
减少代码的执行频率,提升网页性能
应用场景
oninput、onmousemove、onscroll、onresize等
一个小例子(防抖前):当输入框的内容改变就会打印输出内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text">
<script>
let oInput = document.querySelector('input');
oInput.oninput = function(){
console.log(this.value);
}
</script>
</body>
</html>
防抖后:连续的操作只会打印输出一次
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text">
<script>
let oInput = document.querySelector('input');
let timerId = null;
oInput.oninput = function(){
timerId && clearTimeout(timerId);
timerId = setTimeout(()=>{
console.log(this.value);
},1000);
}
</script>
</body>
</html>
timerId初始值为空,当触发input事件后,先判断是否有timerId,如果有,清除定时器,然后重新开启一个定时器,如果没有,设置定时器,一秒钟之后打印输出,如果在这一秒钟之内又触发了input事件,定时器又会被清除掉,重新设置,直到有一秒钟之内不触发input事件才会打印输出。
什么是函数节流(throttle)?
函数节流也是优化高频率执行js代码的一种方式,可以减少高频调用函数的执行次数
函数节流的作用
减少代码的执行频率,提升网页性能
函数节流应用场景
onmousemove / oninput / onscroll / onresize等事件
函数节流和函数防抖的区别
函数节流:减少连续的高频操作函数的执行次数(例如连续调用10次,可能执行3、4次)
函数防抖:让连续的高频操作时,函数只执行一次(例如连续调用10次,但只执行一次)
一个小例子(节流前):当输入框的内容改变就会打印输出内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text">
<script>
let oInput = document.querySelector('input');
oInput.oninput = function(){
console.log(this.value);
}
</script>
</body>
</html>
应用了函数防抖之后:当连续触发后,1S执行一次
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text">
<script>
let oInput = document.querySelector('input');
let flag = true,timerId = null;
oInput.oninput = function(){
if(!flag) return;
flag = false;
timerId && clearTimeOut(timerId);
timerId = setTimeOut(()=>{
flag = true;
console.log(this.value);
},1000);
}
</script>
</body>
</html>
代码解释:与函数防抖的代码相比,增加了一个flag标志,flag初始值是true,在调用高频操作函数的时候先判断flag的值,如果是true就继续往下执行(第一次当然要执行,所以默认值是true),执行时将flag设置为false,然后在定时器里面的代码再将flag设置为true,也就是说,只有定时器里面的代码执行了才能将flag设置为true,才能进入下一次调用,达到减少调用的目的。