先说区别
防抖在高频事件过程中只会执行一次，且执行的是最后一次，而节流在高频事件中可能会执行多次，并且至少执行一次，说白了就是间隔一段时间执行一次
防抖
在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。
function debounce(fun,time){
let timer = null; // 每次先重置timer，否则每次点击都会新增一个新的setTimeout，且不能达到我们多次点击只执行一次的效果。
return function(){
clearTimeout(timer)
let args = arguments
timer=setTimeout(()=>{
fun.apply(this,args) // 修改this指向，需要考虑到执行函数的参数，对于参数而言，使用arguments处理不同的参数。
},time)
}
}
节流
规定在一个单位时间内，只能触发一次函数。如果这个单位时间内触发多次函数，只有一次生效。
function throttle(fun,time){
var _lastTime = null;
return function(){
var _nowTime = +new Date();//当前时间
if (_nowTime - _lastTime > time || !_lastTime) {
fn.apply(this, arguments); //将this和参数传给原函数
_lastTime = _nowTime;
}
}
}
结合应用场景
- debounce
search搜索联想，用户在不断输入值时，用防抖来节约请求资源。
window触发resize的时候，不断的调整浏览器窗口大小会不断的触发这个事件，用防抖来让其只触发一次
- throttle
鼠标不断点击触发，mousedown(单位时间内只触发一次)
监听滚动事件，比如是否滑到底部自动加载更多，用throttle来判断
