【鸿蒙实战开发】JS中节流和防抖

前言

1.在开发中我们经常会遇到事件频繁回调导致的性能和体验下降的问题，比如滚动事件回调或者输入框根据用户输入实时返回sug的场景。

2.一方面用户并不需要那么精确的实时，另一方面实时的操作会发送不必要的多余请求，给服务端造成压力，也给端上造成困扰。

throttle和debounce就是为了解决这类问题出现的

节流 throttle

限制函数的执行频率，保证一定时间内只执行一次函数调用。无论触发频率多高，都会在指定时间间隔内执行一次函数。
节流有时间戳实现和定时器实现两种

时间戳实现

1.在首次触发事件时，函数会立即执行并设置当前时间戳作为基准
2.在后续 持续触发事件 过程中，只有事件的时间戳和基准时间戳之差大于 隔断时间 才会执行函数并把当前时间戳作为基准，之后继续判断后续事件 重复第二步

定时器实现

1.在 持续触发事件 的过程中，函数不会立即执行但会设置一个定时器，定时器结束时 执行函数 并重置定时器
2.后续事件中 只有定时器不存在时 才执行第一步

举个例子

假设我们在排队进电影院，进入电影院的规则是 每10分钟进一波人

第一个人2:00来了，他需要2:10才能进，第二个人2:02来了，他也需要2:10才能进，第三个人2:09来了，他也需要2:10才能进。第四个人2:11来了，他需要在2:20才能进

应用场景

用于处理 连续触发 的事件，比如滚动事件、鼠标移动事件等。控制函数的执行频率，以减少资源消耗和提高性能。
比如

●实现DOM元素的拖放功能mousemove
●搜索关联keyup
●计算鼠标移动距离mousemove
●画布模拟草图功能mousemove
●射击游戏中的 mousedown/keydown事件（每单位时间只能发射一颗子弹）
●监视滚动scroll事件（添加节流后，只要滚动页面，就会每隔一段时间才会计算）

实现示例

// delay表示延迟的时间间隔(单位毫秒)，callback是需要进行防抖的函数
function throttle(delay, callback) {
	let timeoutID;
	let lastExec =