实现防抖和节流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.js,javascript,ecmascript)