定义与应用场景
防抖： 规定时间内没有再次触发，才能真正触发成功，若在规定时间内再次触发了则不能触发成功并且重新计时，将一段时间内连续的多次触发转化为一次触发。
情景：页面resize事件，页面适配时，根据最终呈现的页面情况进行dom渲染，一般使用防抖，只需判断最后一次的变化情况；search搜索联想，用户在不断输入值时，用防抖来节约请求资源。
节流： 持续触发时，保证规定时间间隔内触发一次。
情景：一般是onrize，onscroll等这些频繁触发的函数，如获取滚动条的位置，然后执行下一步动作；鼠标不断点击触发，mousedown(单位时间内只触发一次)；搜索框input事件，例如要支持输入实时搜索可以使用节流方案
实现方法
/**
* @desc 函数防抖
* @param func 函数
* @param wait 延迟执行毫秒数
* @param immediate true 表立即执行，false 表非立即执行
*/
function debounce(func,wait,immediate) {
var timeout;
return function () {
var context = this;
var args = arguments;
if (timeout) clearTimeout(timeout);
if (immediate) {
var callNow = !timeout;
timeout = setTimeout(function(){
timeout = null;
}, wait)
if (callNow) func.apply(context, args)
}
else {
timeout = setTimeout(function(){
func.apply(context, args)
}, wait);
}
}
}
const throttle = (func, wait, ...args) => {
let timeout;
return function(){
const context = this;
if(!timeout){
timeout = setTimeout(() => {
timeout = null;
func.apply(context,args);
},wait)
}
}
}
代码参考博客：https://blog.csdn.net/weixin_39939012/article/details/101211869
