实践后加深的理解
函数节流
什么是函数节流？
- 需要频繁触发的函数，在规定时间内（绝对时间差），只让第一次生效，后面的不生效。
有什么特点？（函数执行后，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>