优化

通过优化方法能够让你的程序性能更好

节流

12345678910111213141516171819202122232425262728293031323334353637

<template>
  <div>
    <div>2秒钟内可以点击成功一次</div>
    <v-button @click="increase">点击了{{ count }}次</v-button>
    <br />

    <div>2秒钟内可以点击成功一次并回调</div>
    <v-button @click="increaseWithCallback">点击了{{ count }}次</v-button>
  </div>
</template>

<script lang="ts" setup>
import { throttle } from '@cat-kit/fe'
import { ref } from 'vue'

const count = ref(0)

const increase = throttle(
  () => {
    count.value++
  },
  2000,
  () => {}
)

const increaseWithCallback = throttle(
  () => {
    return count.value + 1
  },
  2000,
  ret => {
    console.log('回调触发了, 结果是: ' + ret)
    count.value = ret
  }
)
</script>

防抖

123456789101112131415161718192021222324252627282930

<template>
  <div>
    <div>点击立即执行一次, 后续点击完2秒后执行一次</div>
    <v-button @click="increaseImmediate">点击了{{ count }}次</v-button>
    <br />

    <div>点击完2秒后执行一次</div>
    <v-button @click="increase">点击了{{ count }}次</v-button>
  </div>
</template>

<script lang="ts" setup>
import { debounce } from '@cat-kit/fe'
import { ref } from 'vue'

const count = ref(0)

const increaseImmediate = debounce(() => {
  count.value++
}, 2000)

const increase = debounce(
  () => {
    count.value++
  },
  2000,
  false
)
</script>

并发控制

在一些大量并发, 例如文件分片上传时很有用

API

import { ConcurrenceController } from 'cat-kit/fe'

const cc = new ConcurrenceController({
  // 队列
  queue: [],
  // 队列中的每一个元素的并发操作(异步)
  async action(item) {},
  // 最大并发数量（同时）
  max: 3,
  // 并发模式, continue:并发任务中有部分失败继续执行剩余任务, end:并发任务中有1个失败立马结束所有并发, 默认end
  mode: 'continue'
})

// 并发全部成功后的回调
cc.on('success', e => {})
// 并发完成后的回调，可能会有失败的任务
cc.on('complete', e => {})
// 并发失败时的回调
cc.on('failed', e => {})

// 开始任务
cc.start()
// 暂停任务
cc.pause()

// 继续任务
cc.continue()

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136

<template>
  <div>
    <div>大于1000的超时</div>

    运行任务:
    <v-button @click="run">运行</v-button>
    <v-button @click="pause">暂停</v-button>
    <v-button @click="cont">继续</v-button>
    <v-button @click="retry">错误重试</v-button>
    <br />
    <br />


    失败后停止所有操作:
    <v-button @click="runMode()">运行</v-button>

    <br />
    <br />

    失败后继续剩余操作:
    <v-button @click="runMode('continue')">运行</v-button>

    <br />
    <br />

    <div>所有任务({{ timeouts.length }}个): {{ timeouts }}</div>
    <div>成功执行任务({{ finished.length }}个): {{ finished }}</div>
    <div>失败任务: {{ errs }}</div>
    <div>总共执行: {{ count }}次</div>
  </div>
</template>

<script lang="ts" setup>
import { ConcurrenceController } from '@cat-kit/fe'
import { shallowReactive, ref } from 'vue'
const timeouts = [
  1100, 500, 180, 400, 300, 200, 150, 400, 1300, 200, 100, 500, 600, 500, 200,
  200, 190, 330
]

const finished = shallowReactive<number[]>([])
const errs = shallowReactive<number[]>([])
const count = ref(0)

const reset = () => {
  finished.splice(0, finished.length)
  errs.splice(0, errs.length)
  count.value = 0
}



let cc: null | ConcurrenceController = null

const run = () => {
  reset()
  cc = new ConcurrenceController({
    queue: timeouts,
    action: async delay => {
      count.value++
      const result = await new Promise<number>((rs, rj) => {
        setTimeout(() => {
          if (delay > 1000) {
            rj(delay)
            errs.push(delay)
          } else {
            rs(delay)
          }
        }, delay)
      })

      finished.push(result)
      return result
    },
    max: 3,
    mode: 'continue'
  })

  cc.on('complete', e => {
    console.log(e)
    // cc = null
  })

  cc.start()
}

const pause = () => {
  cc?.pause()
}

const cont = () => {
  cc?.continue()
}

const retry = () => {
  cc?.retry()
}

const runMode = async (mode?: 'continue' | 'end') => {
  reset()
  await new Promise((rs, rj) => {
    const cc = new ConcurrenceController({
      queue: timeouts,
      action: async delay => {
        count.value++
        const result = await new Promise<number>((rs, rj) => {
          setTimeout(() => {
            if (delay > 1000) {
              rj(delay)
              errs.push(delay)
            } else {
              rs(delay)
            }
          }, delay)
        })

        finished.push(result)
      },
      max: 2,
      mode
    })

    cc.on('failed', e => {
      rj(e.errors)
    })

    cc.on('success', e => {
      rs(e.result)
    })

    cc.start()
  })
  console.log('success')
}
</script>

安全执行

12345678910111213141516

<template>
  <div>
    <div>尝试解析为JSON: {{ safeRun(() => JSON.parse(origin)) }}</div>
    <div>
      尝试解析为JSON并提供一个默认值:
      {{ safeRun(() => JSON.parse(origin), origin) }}
    </div>
  </div>
</template>

<script lang="ts" setup>
import { safeRun } from '@cat-kit/fe'

const origin = '['
</script>