useThrottleFn/useDebounceFn

以 composition-api 形式对函数进行节流/防抖

相比于 throttle/debounce，更推荐使用 useThrottleFn/useDebounceFn，因为会在页面/组件取消挂载时将未执行完成的节流/防抖函数注销并且不再执行

需要注意 useThrottleFn/useDebounceFn 的返回结构与 throttle/debounce 有差异，下面是 useDebounceFn 的返回结构，与 useThrottleFn 一致

/**
 * @typedef useDebounceFnResult
 * @prop {Function} run - 经过防抖处理后的运行函数。
 * @prop {Function} cancel - 取消防抖，阻止后续函数执行。
 * @prop {Function} flush - 立即执行函数并取消防抖。
 * @prop {Function} pending - 判断防抖函数是否在运行中。
 */

useThrottleFn

用来处理函数节流，比如远程搜索场景，不希望用户使用过高的频率调用搜索接口

<script setup>
import {useThrottleFn, uuid} from '@ifanr/uni-mp'

function delay(ms) {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve()
    }, ms)
  })
}

const list = ref([])

const {run: search} = useThrottleFn(
  () => delay(200).then(() => (list.value = [{id: uuid()}])),
  1000
)
</script>

<template>
  <input @input="search" />
  <view>{{ list.map(({uuid}) => uuid).join(', ') }}</view>
</template>

useDebounceFn

用来处理函数防抖，比如文本编辑器实时保存，当无任何更改操作一秒后进行保存

<script setup>
import {useDebounceFn} from '@ifanr/uni-mp'

function delay(ms) {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve()
    }, ms)
  })
}

const list = ref([])

const {run: save} = useDebounceFn(
  e => io.article.update({id: 'xxx', data: {content: e.detail.value}}),
  1000,
  {leading: false, trailing: true}
)
</script>

<template>
  <textarea @input="save" />
</template>

相关文档

• useThrottleFn - API
• useDebounceFn - API