关于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
}
}
}