ifanrx 工具库

Appearance

lockFn/useLockFn ​

用于给一个异步函数增加竞态锁，防止并发执行
一般来说，只需要将加了锁的函数与触发事件绑定即可，无需套娃，可参照以下例子

TIP

lockFn/useLockFn 一般与 throttle/debounce 相关函数搭配使用，更推荐使用 useThrottleFnWithLock/useDebounceFnWithLock

lockFn ​

lockFn 会返回一个加了竞态锁的函数，在该函数执行完成前，不允许再次调用

TIP

函数处于锁定状态时，执行该函数会返回 undefined。原则上不推荐使用返回值是否为 undefined 作为函数锁定的依据

vue
<script setup>
import {ref} from 'vue'
import {lockFn} from '@ifanrx/uni-mp'

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

const count = ref(0)

const onClick = lockFn(() => delay(1000).then(() => (count.value += 1)))
</script>

<template>
  <button @click="onClick">点我试试{{ count }}</button>
</template>

useLockFn ​

useLockFn 除了会返回一个加了竞态锁的函数，还会返回一个 Ref 表示函数是否处于锁定状态

vue
<script setup>
import {ref} from 'vue'
import {useLockFn} from '@ifanrx/uni-mp'

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

const count = ref(0)

const {run: onClick, locked} = useLockFn(() =>
  delay(1000).then(() => (count.value += 1))
)
</script>

<template>
  <button @click="onClick">点我试试{{ count }}</button>
  <view>onClick 函数是否处于锁定状态: {{ locked }}</view>
</template>

如何选择 lockFn/useLockFn ​

当需要通过函数是否处于锁定状态来决定主流程是否往下执行时，更推荐使用 useLockFn，可通过 useLockFn 返回的 locked 值来判断函数的锁定状态

其他场景使用 lockFn 即可

vue
<script setup>
import {ref} from 'vue'
import {useLockFn, message} from '@ifanrx/uni-mp'

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

const count = ref(0)

const {run: submit, locked} = useLockFn(() => delay(1000).then(() => (count.value += 1)))

function onClick() {
  if (locked.value) {
    message.showToast('请不要点击太快')
    return
  }

  await submit()
  // do something
}
</script>

<template>
  <button @click="onClick">点我试试{{ count }}</button>
  <view>submit 函数是否处于锁定状态: {{ locked }}</view>
</template>

上述场景还是更推荐使用 useThrottleFnWithLock/useDebounceFnWithLock

相关文档 ​