防抖和节流的区别,实现和用处。

简介: 防抖和节流是优化高频事件处理的两种技术。防抖确保在一系列连续事件后仅执行最后一次操作,如搜索输入完成后再发送请求;节流则保证在设定时间内仅执行一次操作,适用于滚动加载等场景。两者通过限制回调函数的执行频率,有效提升前端性能。示例代码展示了如何实现这两种技术。

1,什么是防抖和节流

    防抖:防抖指的是在一段时间内重复触发某一事件,只会执行指定时间后的最后一次。



    节流:节流是指触发的事件会在指定的时间间隔才会生效一次。

2,防抖和节流的区别

           防抖是在重复触发某一事件时只会在指定时间过后触发成功最后一次事件,而节流是在重复触发某一事件的时候会每隔指定时间后触发成功一次。

3,防抖和节流的实现

    防抖代码:

var debounce = function (fn, t) {
var timer = null;
return () => {
clearTimeout(timer);
timer = setTimeout(fn, t);
};
};

    节流代码:

var throttle = (fn, t) => {
var index = false;
return () => {
if (!index) {
index = true;
setTimeout(() => {
fn();
index = false;
}, t);
}
};
};

4,使用的场景

    防抖在连续的事件,只需触发一次回调的场景有:      

搜索框搜索输入。只需用户最后一次输入完,再发送请求
手机号、邮箱验证输入检测
窗口大小resize。只需窗口调整完成后,计算窗口大小。防止重复渲染。

    节流在间隔一段时间执行一次回调的场景有:

滚动加载,加载更多或滚到底部监听
搜索框,搜索联想功能

5,总结

    防抖和节流本质上是优化高频率执行代码的一种手段

    浏览器的 resize、scroll、keypress、mousemove 等事件在触发时,会不断地调用绑定在事                        件上的回调函数,极大地浪费资源,降低前端性能

为了优化体验,需要对这类事件进行调用次数的限制,对此我们就可以采用 防抖(debounce) 和 节流(throttle) 的方式来减少调用频率。

相关文章
|
前端开发
封装防抖函数和节流函数
封装防抖函数和节流函数
74 0
|
1月前
|
前端开发 JavaScript UED
什么是防抖和节流?有什么区别?如何实现?
防抖和节流是前端优化技术,用于限制函数的执行频率。防抖是在一段时间内只执行一次函数,常用于搜索输入、窗口调整等场景;节流是在固定时间间隔内执行函数,适用于滚动事件、鼠标移动等。实现方式通常使用定时器。
|
JavaScript 前端开发 Java
手写JavaScript防抖节流和休眠函数
防抖原理是在一定时间内,只有最后一次操作,再过延迟的时间后执行,一般用于防止用户多次重复点击按钮,只会触发最后一次
51 0
|
监控 前端开发
前端经典面试题 | 理解 节流 和 防抖(后附手写节流\防抖)
前端经典面试题 | 理解 节流 和 防抖(后附手写节流\防抖)
什么是防抖和节流,怎么实现一个防抖和节流?
功能:当事件被触发N秒之后再执行回调,如果在N秒内被触发,则重新计时。
面试官:防抖和节流的区别是啥?实现一个防抖和节流函数(一)
面试官:防抖和节流的区别是啥?实现一个防抖和节流函数(一)
|
UED
防抖和节流怎么做
防抖和节流都是为了控制代码执行频率,提高性能和用户体验。
37 0
|
JavaScript
原生js实现一个节流函数和防抖函数?
原生js实现一个节流函数和防抖函数?
71 0
|
前端开发
什么是防抖和节流?有什么区别?
什么是防抖和节流?有什么区别?
78 0