实践后加深的理解
函数节流
什么是函数节流?
- 需要频繁触发的函数,在规定时间内(绝对时间差),只让第一次生效,后面的不生效。
有什么特点?(函数执行后,lastTime才被重新赋值)
- 一个时间差内被续触发,一定会执行一次。
- 多个时间差内连续触发,最终执行多次。
有什么使用场景?
- 滚动条事件的监听
- 。。。(尴尬,博主经验较少,大家理解了按需使用就行,哈哈)。
函数防抖
什么是函数防抖?
- 需要频繁触发的函数,在规定时间内(相对时间差),只让最后一次生效,前面的不生效。
有什么特点?(函数触发后,timer就会清除重建)
- 一个时间差内连续触发,不一定会执行一次。
- 多个时间差内连续触发,最终执行一次。
有什么使用场景?
- 做搜索提示业务时,用户不断输入值,事件回调函数不断被触发,对该事件回调函数使用函数防抖技术,在输入相对稳定时再发送请求以减少请求次数。
- 。。。(尴尬,博主经验较少,大家理解了按需使用就行,哈哈)。
两者异同
- 同:节流/防抖后,函数每次触发不一定每次执行,两者都可以用来在约束函数在规定时间内只执行一次。
- 异:节流、防抖的规定时间概念不同,函数节流中的规定时间是个绝对时间差不会被刷新,而函数防抖中的规定时间是个相对时间差会被刷新。
实践过程
运行结果
结果分析
前四个节流输出
- 疯狂点击四秒多钟,btn1的点击事件函数不断被触发,但因为被节流了,所以每秒输出一个,最终有四个输出。
最后一个防抖输出
- 疯狂点击好多秒钟,btn2的点击事件函数不断被触发,但因为被防抖了,所以前几秒都没有输出,停止点击等待一秒后才出现一个输出。
相关代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>函数节流、函数防抖</title>
</head>
<body>
<button id="btn1">函数节流</button>
<button id="btn2">函数防抖</button>
<script type="text/javascript">
function throttle(fn,delay){
let lastTime = 0;
return function(){
let nowTime = Date.now();
if(nowTime-lastTime>delay){
fn.call(this);
lastTime = nowTime;
}
}
}
document.getElementById('btn1').onclick = throttle(function(){
console.log('函数节流,执行时间:'+Date.now())},1000);
function debounce(fn,delay){
let timer = null;
return function (){
clearTimeout(timer);
timer = setTimeout(function(){
fn.call(this);
},delay)
}
}
document.getElementById('btn2').onclick = debounce(function(){
console.log('函数防抖,执行时间:'+Date.now())},1000)
</script>
</body>
</html>