节流与防抖

节流 throttle

定义

n 秒内频繁调用多次时，只执行第一次调用（也可以选择定时结束时执行）

举例

如下，疯狂点击按钮，1 秒内只会执行一次，且这一次为 1 秒内的第一次点击

import {throttle} from 'lodash';

<Button
  onPress={throttle(_onSave, 1000, {leading: true, trailing: false})}
  title={'保存'}
/>

leading = true, trailing = true：默认情况。执行第一次调用，如果有多次，则定时结束后再执行一次。不建议。
leading = true, trailing = false：执行第一次调用。建议。
leading = false, trailing = true：定时结束后次调用一次。不建议。
leading = false, trailing = false：永不触发回调。不建议。

应用

按钮点击跳页面，以第一次为准就够了
滚动到底部加载更多

防抖 debounce

定义

n 秒内频繁调用多次时，只执行最后一次调用（定时结束时无新调用即为最后一次）

举例

如下，疯狂拖动进度条，拖动后只要 0.01 秒内发生过拖动，则上一次的 onProgressValueChange 会被取消，若 0.01 秒内没有拖动，则上一次的 onProgressValueChange 才会被调用

import {debounce} from 'lodash';

<Slider
  onValueChange={debounce(onProgressValueChange, 10)}
/>

应用

进度条的频繁拖动，以最后一次为准
搜索框搜索输入。只需用户最后一次输入完，再发送请求
手机号、邮箱验证输入检测

总结

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

比如，设置时间频率为 500ms，在 2 秒时间内，频繁触发函数，节流，每隔 500ms 就执行一次。防抖，则不管调动多少次方法，在 2s 后，只会执行最后一次

节流 throttle
防抖 debounce
总结