js节流防抖以及应用场景
函数防抖和节流是什么??
函数的防抖节流是用于优化高频率执行js时出现的内存损耗、资源浪费等问题,为了优化此类问题需要对某些事件进行调用次数限制
需要优化的常见的函数 浏览器的scroll(滚动)、resize(尺寸)、鼠标的mousemove(获取所在位置)、输入框的keydown(按下)等事件 在使用时会不断调用事件而我们所需要的是最后一次给的值
所以我们需要对这些方法进行限制
防抖
第一种:
触发事件后n秒后触发内部事件,函数只能执行一次,如果在这n秒内又被触发,则重新计时,直到过了这个时间后才可以再次执行.
举个栗子
坐电梯的时候,如果电梯检测到有人进来(触发事件),就会多等待 10 秒,此时如果又有人进来(10秒之内重复触发事件),那么电梯就会再多等待 10 秒。在上述例子中,电梯在检测到有人进入10秒钟之后,才会关闭电梯门开始运行,因此,“函数防抖”的关键在于,在 一个事件 发生 一定时间 之后,才执行 特定动作。
这里有人进来是触发事件,关门是内部事件
使用场景:
- 调整浏览器窗口大小时,resize 次数过于频繁,造成计算过多,此时需要最后一次的值,就用到了防抖
- 滚动操作时,每次滚动都会触发事件,但是我们需要获取最后停留的位置,就用到了防抖
- 其他的大佬们补充
代码:
function debounce(fn, wait = 1000) {
var timeout = null;
return function () {
if (timeout !== null) clearTimeout(timeout);
timeout = setTimeout(() => {
fn.apply(this, arguments);
}, wait);
}
};
第二种:
触发事件后立即执行内部事件,函数只能执行一次,如果在这n秒内又被触发,则重新计时,直到过了这个时间后才可以再次执行.
举个栗子
有一个感应门,开门是一瞬间,关门需要10秒,我走到门前,门立即就开了,10秒后门才会关,想让门在开,我需要等待10秒才可以在让门开
这里走到感应门前是触发事件,开门是内部事件.
使用场景:
- 点击登录,获取验证码等,避免用户多次点击,点击过快,以至于发送了多次请求,就用到了防抖
- 上拉,下拉获取下一条或者最新数据时,方式用户多次上拉或下拉,就用到了防抖
- 其他的大佬们补充
代码:
function debounce(fn, wait = 1000) {
let timer = null;
return function () {
let now = !timer;
timer && clearTimeout(timer);
timer = setTimeout(() => {
timer = null;
}, wait);
if (now) {
fn.apply(this, arguments);
};
};
};
节流
函数节流的目的,是为了限制函数一段时间内只能执行一次。因此,定时器实现节流函数通过使用定时任务,延时方法执行。在延时的时间内,方法若被触发,则直接退出方法。从而,实现函数一段时间内只执行一次。
使用场景:(别人哪里看到的,自身不知道有什么样的场景)
- 在页面的无限加载场景下,需要用户在滚动页面时,每隔一段时间发一次 ajax 请求,而不是在用户停下滚动页面操作时才去请求数据;
- 监听滚动事件,比如是否滑到底部自动加载更多,用throttle来判断;
- 大佬补充
代码:
throttle(fn, wait = 1000) {
let last = 0;
return function () {
let now = Date.now();
if (now - last > wait) {
fn.apply(this, arguments);
last = now;
};
};
};
关于节流的使用场景还是有点不太了解欢迎大佬来指导一下
如有问题,欢迎指正。
点个关注支持一下我吧