lodash节流throttle、防抖debounce

节流防抖目的是减少事件执行，提高浏览器性能
在vue2、uniapp使用

<scroll-view :scroll-y="true" :scroll-top="scrollTop" @scroll="scrollThrottled">
</scroll-view>

import { throttle, debounce } from 'lodash';

data () {
  return {
    scrollTop: 0
  };
},
// 注意这里不用箭头函数，不用改变this指向
// 节流：如果持续触发事件，每隔一段时间只执行一次函数
// 原理：定义一个延时器，在延迟时间内禁止触发事件，延迟时间结束后才能触发一次，所以是延迟时间内只触发一次。
scrollThrottled: throttle(function (e) {
  this.scrollTop = e.detail.scrollTop;
}, 200),
// 防抖：在重复事件中只触发最后一次事件。
// 原理：定义一个延时器，延迟时间结束后触发事件。在延迟时间还没结束的时候，再次触发事件，清空延时器，重新定义新的延时器进行新的判断。所以只触发最后一次事件
scrollThrottled: debounce(function (e) {
  this.scrollTop = e.detail.scrollTop;
}, 200),

在vue3中使用

<script setup>
import { debounce } from 'lodash-es'
const update = debounce((e) => {
  input.value = e.target.value
}, 100)