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;
};
};
};
关于节流的使用场景还是有点不太了解欢迎大佬来指导一下
如有问题，欢迎指正。
点个关注支持一下我吧
