react简单实现防抖和节流
防抖和节流可以节省资源，减小服务器端压力，提升用户体验。
在日常开发中，我们经常会有这样的需求：监听用户的输入（keyup、keydown）、浏览器窗口调整大小和滚动行为（resize）、鼠标的移动行为（mousemove）等。如果这些事件一触发我们就执行相应的事件处理函数的话，那将会造成较大的资源浪费或者给用户带来不好的体验。
这时防抖和节流就派上用场了！！
一、防抖：
防抖：触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间。
思路：每次触发事件时都取消之前的延时调用方法。
使用的本质：不允许某一行为触发。一般用于input输入框
防止抖动的意思，也就是不抖动时才进行相应的处理。比如一根拉直的弹簧，我们拨动一下它就会抖动，过一段时间后弹簧会恢复到平静的状态（从拨动弹簧使其抖动到恢复平静的时长就是代码例子的ms值）。在这个过程中，拨动弹簧的这一行为假设为事件被触发（代码中的input事件被触发），当弹簧恢复平静时我们再执行事件处理函数（代码中的sayHi函数）。基于以上假设，当我们在弹簧还没恢复到平静状态时，又不断地拨动它（清除了原来的setTimeout，并重新开始计时），因为弹簧还没恢复到平静，那么事件处理函数就一直不会被执行。只有当我们拨动它，并且之后再也不动它（也就是最后一次触发），等它恢复到平静状态时（setTimeout时间到达），事件处理函数才会被执行。
实现方法：可以借助react的ahooks库的useDebounce或者是lodash库中的_.debounce防抖
原生：（利用闭包中变量不会被销毁内存的原理）
function debounce(fn, ms) { //fn:要防抖的函数 ms:时间
let timerId // 创建一个标记用来存放定时器的返回值
return function () {
timerId && clearTimeout(timerId) // 每当用户输入的时候把前一个 setTimeout clear 掉
// 然后又创建一个新的 setTimeout, 这样就能保证输入字符后的 interval 间隔内如果还有字符输入的话，就不会执行 fn 函数
timerId = setTimeout(() => {
fn.apply(this, arguments)
}, ms)
}
}二、节流
节流： 高频事件触发，但在n秒内只会执行一次，所以节流会稀释函数的执行频率。
思路：每次触发事件时都判断当前是否有等待执行的延时函数。
使用的本质：允许某一行为触发，但是触发的频率不能太高。节流一般用于动画相关的场景。
实现方法：可以借助react的ahooks库的useThrottle或者是lodash库中的_.throttle来节流
原生：
function throttle(fn, ms) {
let timerId // 创建一个标记用来存放定时器的id
return function () {
// 没有定时器等待执行，则表示可以创建新的定时器来执行函数
if (!timerId) {
timerId = setTimeout(() => {
// 定时器id清空，表示可以执行下一次调用了
timerId = null
fn.apply(this, arguments)
}, ms)
}
}
}
到此这篇关于react简单实现防抖和节流的文章就介绍到这了,更多相关react 防抖和节流内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
在create-react-app中使用css modules的示例代码
这篇文章主要介绍了在create-react-app中使用css modules的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-07-07
这篇文章主要为大家详细介绍了react实现同页面三级跳转路由布局，一个路由小案例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-09-09
React+TypeScript项目中使用CodeMirror的步骤
CodeMirror被广泛应用于许多Web应用程序和开发工具，之前做需求用到过codeMirror这个工具，觉得还不错，功能很强大，所以记录一下改工具的基础用法，对React+TypeScript项目中使用CodeMirror的步骤感兴趣的朋友跟随小编一起看看吧2023-07-07
在React中，用户登录功能是一个常见的需求，为了实现该功能，需要对用户输入的用户名和密码进行验证，并将验证结果保存到应用程序状态中，在React中，可以使用Redux Toolkit来管理应用程序状态，从而实现用户登录功能，需要详细了解可以参考下文2023-05-05
本文主要介绍了React18新增特性released的使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-05-05
本篇文章主要介绍了React Native实现进度条弹框的示例代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-07-07
Ant Design与Ant Design pro入门使用教程
Ant Design 是一个服务于企业级产品的设计体系,组件库是它的 React 实现,antd 被发布为一个 npm 包方便开发者安装并使用,这篇文章主要介绍了Ant Design与Ant Design pro入门,需要的朋友可以参考下2023-12-12
这篇文章主要介绍了React+EggJs实现断点续传的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-07-07
这篇文章主要介绍了react路由动画跳转功能,大概思路是下载第三方库 引用,创建css文件引用,想要实现跳转动画功能,就在那个组件的根节点绑定classname属性即可,在跳转的时候即可实现,需要的朋友可以参考下2023-10-10
本篇文章主要介绍了ReactNative之FlatList的具体使用方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-11-11
最新评论