说明:此文章仅供参考和学习使用,转载请注明出处。
1.防抖:阻止一个函数在很短的时间间隔内连续调用。只有在上一次函数调用执行后达到规定的时间间隔,才能进行下一次调用,但要保证一个一个累计最小调用的时间。相当于将若干函数的调用,合并为在某个固定的时间间隔内的一次函数的调用,只要不是最后一次触发,就不异步执行请求。
应用场景: 函数节流一般用于,onresize,onscroll等短时间内会多次触发的事件。
实现原理: 当触发一个事件时,先用一次性定时器setTimeout让这个事件延迟一小段事件再执行。如果这个事件间隔内又触发了该事件,则clearTimeout清除原来的定时器,再setTimeout一个新的定时器重复以上步骤。
2.实现过程:为了方便大家理解,因此代码分为两部分,一部分为基础写法,一部分为重构后的写法,两种都是一样的。
<!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>
</head>
<body style="height: 2000px;">
<button id="btn">click me!</button>
<script>
var timer; //用来存储计时器的编号
window.onscroll = function() {
// 基础写法
if (timer == 'undefined') { //如果定时器的编号为undefined,那么说明此时的事件没有被触发,事件没有触发,则直接启动定时器
timer = setTimeout( () => {
console.log('发送ajax请求');
}, 200)
} else {
//否则,如果事件被触发,那么说明此时窗口的滚动事件已经被触发。说明此时有滚动事件在执行,而在计时器未达到等待的事件间隔内,我们现在又要让滚动事件
// 重新执行。因此,首先我们需要清空已经存在的计时器,然后重新开启新的计时器。只有在计时器规定的事件内,没有新的事件重新被触发,那么此时才会
// 触发计时器中的事件执行
clearTimeout(timer);
timer = setTimeout( () => {
console.log('发送ajax请求');
}, 200)
}
//代码重构
if (timer !== 'undefined'){
clearTimeout(timer);
}
timer = setTimeout( () => {
console.log('发送ajax请求')
}, 200)
}
</script>
</body>
</html>
3.防抖效果如图:
为防抖前的效果:
随着滚动条的滚动,事件不停的执行。
防抖后的效果:
此时的效果为:当滚动滚动条结束时,才执行。
4.节流: 相比于防抖,节流就是让函数在特定时间内只执行一次。第一次发送请求后,只要响应没回来,就不能发送第二次请求。
**应用场景:**按钮的点击事件,为了防止用户不停点击按钮从而使请求不断被提交
**实现原理:**原理与防抖的原理类似,只不过是通过开关来控制,是否可以实现节流。开关默认是开启状态,当触发事件后,将开关关闭。开关关闭后,触发定时器,在规定的时间间隔内,获取到返回回来的响应之后,重新开启开关。
5.代码实现如下:
<!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>
</head>
<body style="height: 2000px;">
<button id="btn">click me!</button>
<script>
// 函数节流:相比于防抖,节流就是让函数在特定时间内只执行一次。例如:按钮的点击事件,为了防止用户不停点击按钮从而使请求不断被提交
// 第一次发送请求后,只要响应没回来,就不能发送第二次请求。
var canClick = true; //可以点击
btn.onclick = function() {
if(canClick) { //如果按钮可以被点击
canClick = false; //防止按钮一直被点击
console.log('发送ajax请求')
var clickTimer = setTimeout( () => {
console.log('请求完成'); //执行的点击事件的内容
canClick = true; //间隔200ms后,才能再次点击该按钮
clearTimeout(clickTimer);
}, 2000);
}
}
</script>
</body>
</html>
实现效果:
未开启节流之前:
没点击一次,btn提交一次请求。
开启节流效果之后:
每隔两秒之后,请求返回后才执行下一次点击事件,期间点击按钮触发的其他事件都未执行。
6.节流和防抖的区别:
防抖:只要不是最后一次触发,就不异步执行请求
节流:第一次发送请求后,只要响应没回来,就不能发送第二次请求。