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

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

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
面试官:什么是防抖和节流?如何实现?应用场景?
面试官:什么是防抖和节流?如何实现?应用场景?
384 0
|
9月前
|
JavaScript 前端开发 索引
在遍历对象属性时,for...in和for...of有什么区别?
在遍历对象属性时,for...in和for...of有什么区别?
433 57
|
前端开发 JavaScript UED
什么是防抖和节流?有什么区别?如何实现?
防抖和节流是前端优化技术,用于限制函数的执行频率。防抖是在一段时间内只执行一次函数,常用于搜索输入、窗口调整等场景;节流是在固定时间间隔内执行函数,适用于滚动事件、鼠标移动等。实现方式通常使用定时器。
|
前端开发 JavaScript UED
JavaScript防抖和节流的使用及区别
JavaScript防抖和节流的使用及区别
648 154
|
JavaScript 前端开发 安全
JavaScript与TypeScript的对比,分析了两者的特性及在实际项目中的应用选择
本文深入探讨了JavaScript与TypeScript的对比,分析了两者的特性及在实际项目中的应用选择。JavaScript以其灵活性和广泛的生态支持著称,而TypeScript通过引入静态类型系统,提高了代码的可靠性和可维护性,特别适合大型项目。文章还讨论了结合使用两种语言的优势,以及如何根据项目需求和技术背景做出最佳选择。
1753 4
|
存储 前端开发 JavaScript
WEB前端开发中如何实现大文件上传?
WEB前端开发中如何实现大文件上传?
1754 3
WEB前端开发中如何实现大文件上传?
|
存储 缓存 前端开发
灵魂拷问-前端的作用--性能优化篇
作者最近在尝试对负责的平台进行性能优化,本文整理了些前端性能优化的一些常见策略。
|
人工智能 JavaScript 前端开发
JavaScript:原型、原型链、继承
JavaScript:原型、原型链、继承
438 0
|
移动开发 JavaScript 前端开发
【绝技揭秘】从零到英雄:解锁UniApp H5项目中的二维码生成与扫描秘籍,让你的应用瞬间变身扫码达人!
【8月更文挑战第20天】二维码在移动应用中无处不在。本文详述了在UniApp H5项目中实现二维码生成与扫描的方法。通过对比插件`uni-app-qrcode`和JavaScript库`qrcode-generator`生成二维码的方式,以及使用插件`@juggle/resize-observer`和HTML5的MediaDevices API进行扫描的技术方案,帮助开发者挑选最佳实践。无论是插件的便捷性还是原生JavaScript的灵活性,都能满足不同项目需求。
1109 0