函数的节流与防抖

1、函数节流
例子：
var flag = true;
document.getElementById('throttle').onscroll = function() {
if(!flag = true) {return;}
flag = false;
setTimeout(function() =>{
console.log('函数节流')
flag = true
},500)
}
原理：
。。。

2、函数防抖
例子：
var timer = false
ducument.getElementById('debounce').onscroll = function() {
clearTimeout(timer);
timer = setTimeout(function () => {
console.log('函数防抖')
}, 500)
}
原理：
。。。

区别：
相同之处：
防止函数被无意义的高频调用；
不同之处：
节流：确保函数在特定时间内最多执行一次；（比如人眨眼睛）
防抖：确保函数持续触发不执行，而只有一段时间内不触发才执行。
优点：通过setTimeout控制函数的执行时机，节约性能，不至于多次触发复杂的业务逻辑导致页面卡顿。