关于Js防抖与节流的思考
1，比较正式的解释他们的区别：
防抖：就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间，防抖注重结果
节流：:是让一个函数无法在很短的时间间隔内连续调用，当上一次执行完之后过了规定的时间间隔，才能进行下一次的函数调用，节流注重过程
2，非官方解释
防抖：A打了一个B一下，B开始哭（假设哭5分钟），在这5分钟内A一直打，而B就只为哭A打的第一下，其他的从第二次开始，B就像练了金钟罩一样，抗打ƪ(˘⌣˘)ʃ，但是这5分钟过了之后金钟罩没了，需要A重新打一次，让B哭出来才重新生成金钟罩
节流：这就有点像鬼畜了，A一直打，B一直哭，但是每次都是重新哭，类似于诸葛亮说 ‘竟然有如此厚颜无耻之人’，那么我们在暂停与播放之间快速切换就会出现 ‘竟然’ ‘竟然’ ‘竟然’ ‘竟然’ ‘竟然’ ‘竟然’ ‘竟然’ ‘竟然’ ‘有如此厚颜无耻之人’；
3，应用场景
防抖：窗口 resize时，搜索时需要根据输入框中的内容发送ajax请求时。。。。。。
节流：滚动条到达底部（比如要做加载更多）。。。。。。
4，程序实现：
//节流
let time;
let per = 200; //这个是间隔时间，即事件触发到事件回调开始执行的间隔时间。根据业务需求决定
function throtting() {
if(time) {
clearTimeout(time)
}
time = setTimeout(function() {
//事件回调的具体方法
}, per)
}
//防抖
let timelength = 2000; //即在2秒内自第二次开始的其他事件触发都将被忽略
let lasttime = null; //上一次执行的时间点
function debounce() {
if(!lasttime) {
lasttime = new Date().getTime()
} else {
let curenttime = new Date().getTime();
if(curenttime - lasttime > 2000) {
//事件回调的具体方法
//需将上一次的时间更新↓
lasttime = curenttime
} else {
//时间不够，不做任何操作
return false
}
}
}本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！
