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

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

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

目录
相关文章
|
10月前
|
JavaScript 前端开发 开发工具
从零开始使用node.js制作一个脚手架
本文介绍了如何从零开始使用Node.js制作一个项目脚手架,涵盖了脚手架的基本概念、所需准备的第三方库、项目结构的初始化、命令注册、项目创建流程及用户交互设计等内容。通过实例演示了如何利用commander、inquirer等库实现命令行工具的开发,最终完成了一个能够根据用户选择自动创建Vue或React项目的脚手架。
183 1
从零开始使用node.js制作一个脚手架
|
11月前
|
前端开发 JavaScript UED
什么是防抖和节流?有什么区别?如何实现?
防抖和节流是前端优化技术,用于限制函数的执行频率。防抖是在一段时间内只执行一次函数,常用于搜索输入、窗口调整等场景;节流是在固定时间间隔内执行函数,适用于滚动事件、鼠标移动等。实现方式通常使用定时器。
|
10月前
|
存储 缓存 JavaScript
一文带你了解vuex和使用(2024年11月)
欢迎来到我的博客,我是自学前端两年半的大一学生,熟悉JavaScript与Vue,正向全栈发展。本篇介绍了Vuex,Vue.js的状态管理模式,包括其核心概念如state、getter、mutation、action及模块化使用,通过集中管理状态确保应用状态的可预测变化。文章详细解析了Vuex的工作原理,特别是与Vue的computed属性和响应式系统的集成,以及如何在实际项目中搭建和使用Vuex。如果你觉得有帮助,欢迎关注,我将持续更新更多技术文章。🎉🎉🎉
958 0
|
10月前
|
JSON 前端开发 JavaScript
JavaScript中对象的数据拷贝
本文介绍了JavaScript中对象数据拷贝的问题及解决方案。作者首先解释了对象赋值时地址共享导致的值同步变化现象,随后提供了五种解决方法:手动复制、`Object.assign`、扩展运算符、`JSON.stringify`与`JSON.parse`组合以及自定义深拷贝函数。每种方法都有其适用场景和局限性,文章最后鼓励读者关注作者以获取更多前端知识分享。
135 1
JavaScript中对象的数据拷贝
|
10月前
|
移动开发 前端开发 JavaScript
前端H5使用canvas画爱心以及笑脸
本文介绍了HTML5中的canvas元素及其基本用法,通过JavaScript在canvas上绘制图形。首先简述了canvas的功能,接着详细展示了如何使用`bezierCurveTo`方法绘制爱心和`arc`方法绘制笑脸,并附有示例代码及效果说明。最后总结了canvas在网页图形绘制上的应用潜力。
286 2
|
10月前
|
JavaScript 前端开发
js中的bind,call,apply方法的区别以及用法
JavaScript中,`bind`、`call`和`apply`均可改变函数的`this`指向并传递参数。其中,`bind`返回一个新函数,不立即执行;`call`和`apply`则立即执行,且`apply`的参数以数组形式传递。三者在改变`this`指向及传参上功能相似,但在执行时机和参数传递方式上有所区别。
162 1
|
10月前
|
JavaScript 前端开发
vue2的响应式数据原理
`Object.defineProperty` 是 Vue 2 实现响应式数据的核心方法,通过定义 getter 和 setter 来追踪属性的变化。当访问或修改属性时,会触发相应的函数,从而实现数据的动态更新。本文介绍了该方法的基本用法、响应式原理及其简单实现,展示了如何通过监听属性变化来自动更新视图,体现了前端框架设计中的巧妙之处。
212 1
|
10月前
|
前端开发
CSS transition过渡属性详解
本文介绍了CSS中`transition`属性的作用、用法及实例。`transition`用于在元素属性变化时添加平滑过渡动画,通过设置`transition-property`、`transition-duration`、`transition-timing-function`和`transition-delay`等属性值,可以精细控制过渡效果。文末提供了HTML示例代码,展示了如何使用`transition`实现鼠标悬停时背景颜色的平滑变化。
454 1
|
10月前
|
JavaScript
使用node.js搭建一个express后端服务器
Express 是 Node.js 的一个库,用于搭建后端服务器。本文将指导你从零开始构建一个简易的 Express 服务器,包括项目初始化、代码编写、服务启动与项目结构优化。通过创建 handler 和 router 文件夹分离路由和处理逻辑,使项目更清晰易维护。最后,通过 Postman 测试确保服务正常运行。
634 1

热门文章

最新文章