什么是防抖和节流？有什么区别？如何实现？

一、是什么

        本质上是优化高频率执行代码的一种手段。

        防抖和节流都是优化高频率执行代码的手段，用于限制函数的执行频率，提升性能和用户体验。

二、区别

        防抖（Debounce） ：是指在一段连续的时间内，只执行最后一次操作。当事件被触发后，如果在设定的时间间隔内再次触发该事件，就会重新计时，直到超过设定的时间间隔才会执行函数。防抖常用于处理输入框输入事件，例如在用户输入时，只有在用户停止输入一段时间后才会执行相关操作，避免频繁的请求或操作。

节流（Throttle）：是指在一段连续的时间内，只执行一次操作。当事件被触发后，函数会立即执行，并且在设定的时间间隔内，不管事件触发多少次，都不会再次执行函数，直到超过设定的时间间隔才会重新执行。节流常用于处理滚动事件、窗口调整事件等，以减少函数的执行频率。

        定义

       

• 防抖: n 秒后在执行该事件，若在 n 秒内被重复触发，则重新计时
• 节流: n 秒内只运行一次，若在 n 秒内重复触发，只有一次生效

代码实现

防抖:

        

 节流:

        将时间戳写法的特性与定时器写法的特性相结合，实现一个更加精确的节流。

        组件lodash的用法

npm i -save lodash   \\全局安装

import _ from 'lodash' //引入到文件中

         {/* _下的debounce为防抖 throttle为节流 (需要执行的函数,间隔时间) */}
        <button onClick={_.debounce(currentClick,2000)}>lodash防抖按钮</button>

        <button onClick={_.throttle(currentClick,2000)}>lodash节流按钮</button>