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

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

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) 的方式来减少调用频率。

目录
相关文章
|
前端开发 JavaScript Java
面试官:什么是防抖和节流?如何实现?应用场景?
面试官:什么是防抖和节流?如何实现?应用场景?
376 0
|
前端开发 JavaScript UED
什么是防抖和节流?有什么区别?如何实现?
防抖和节流是前端优化技术,用于限制函数的执行频率。防抖是在一段时间内只执行一次函数,常用于搜索输入、窗口调整等场景;节流是在固定时间间隔内执行函数,适用于滚动事件、鼠标移动等。实现方式通常使用定时器。
|
8月前
|
JavaScript 前端开发 索引
在遍历对象属性时,for...in和for...of有什么区别?
在遍历对象属性时,for...in和for...of有什么区别?
419 57
|
JavaScript 前端开发 安全
JavaScript与TypeScript的对比,分析了两者的特性及在实际项目中的应用选择
本文深入探讨了JavaScript与TypeScript的对比,分析了两者的特性及在实际项目中的应用选择。JavaScript以其灵活性和广泛的生态支持著称,而TypeScript通过引入静态类型系统,提高了代码的可靠性和可维护性,特别适合大型项目。文章还讨论了结合使用两种语言的优势,以及如何根据项目需求和技术背景做出最佳选择。
1734 4
|
存储 前端开发 JavaScript
WEB前端开发中如何实现大文件上传?
WEB前端开发中如何实现大文件上传?
1717 3
WEB前端开发中如何实现大文件上传?
|
存储 缓存 前端开发
灵魂拷问-前端的作用--性能优化篇
作者最近在尝试对负责的平台进行性能优化,本文整理了些前端性能优化的一些常见策略。
|
前端开发
前端常用方法防抖(debounce)和节流(throttle)的示例演示及应用场景说明
前端常用方法防抖(debounce)和节流(throttle)的示例演示及应用场景说明
683 0
|
JavaScript API 索引
js中的reduce()方法 讲解 和实现
`reduce()` 方法对数组元素依次应用一个回调函数,将结果累计并最终返回单一值。语法为 `reduce(callback(accumulator, currentValue, currentIndex, array), initialValue)`。参数包括累计器(初次为初始值或首元素)、当前元素值、索引及数组自身。此方法需返回值供下一轮迭代使用。常见应用场景包括计算数组总和与平均值、统计元素频率、过滤与转换数组内容及去除重复项等。例如,可通过 `reduce()` 快速计算 `[1, 2, 3, 4, 5]` 的总和或对对象属性值求和。此外,还可自定义实现 `reduce()` 方法
6769 1