React-异步队列执行方法useSyncQueue

1. 完整代码

typescript 复制代码
import React, { useEffect, useRef } from 'react';
import { useDebounceFn } from "ahooks";
// 队列任务类型
interface QueueTask {
  id: number | string;
  execute: () => PromiseLike<any>;
}
// 异步队列执行方法
function useSyncQueue(params:any) {
  const { limit = 3 } = params||{};

  const queue = useRef<QueueTask[]>([]);

  // 任务执行完成后的回调函数
  let overCallback = useRef<() => void>();
  // 等待所有任务执行完成的Promise
  const awaitExeOver = () => {
    return new Promise<void>((resolve, reject) => {
      if (queue.current.length === 0 && executingNum.current === 0) {
        resolve();
      }
      overCallback.current = () => {
        resolve();
        overCallback.current = undefined;
      }
    })
  };

  // 添加任务
  const addTask = (task: QueueTask | QueueTask[]) => {
    if (Array.isArray(task)) {
      queue.current = queue.current.concat(task);
    } else {
      queue.current.push(task);
    }
    executeTask();
  };

  // 执行中的任务数量
  const executingNum = useRef(0);
  // 执行队列中的任务
  const { run: executeTask } = useDebounceFn(() => {
    // 凑齐同时执行的最大任务数量
    while (executingNum.current < limit && queue.current.length > 0) {
      const task = queue.current.shift(); // 获取队列中的第一个任务
      if (task) {
        executingNum.current += 1; // 更新执行中的任务数量
        task.execute().then(res => {
          executingNum.current -= 1; // 更新执行中的任务数量
          console.log('执行任务', task.id, '执行结果', res, '当前执行中的任务数量', executingNum.current, '当前队列长度', queue.current.length);

          if (queue.current.length === 0 && executingNum.current === 0) {
            // 所有任务执行完成
            overCallback.current?.();
          } else {
            // 继续执行队列中的任务
            executeTask();
          }
        })
      }
    }
  }, { wait: 300 });

  return { addTask, awaitExeOver };
}

2. 使用方式:

useSyncQueue返回两个方法:

  • addTask添加任务;
    可单个添加,可数组添加;
    任务对象QueueTask由唯一ID和获取异步Promise的execute方法组成;
    添加任务后,会自动执行队列任务,直到队列为空
  • awaitExeOver等待任务全部执行完;
    要在添加过任务之后调用awaitExeOver方法;
    执行awaitExeOver方法,才会创建回调方法overCallback;
    队列为空时,执行overCallback,awaitExeOver方法等待结束;
相关推荐
好好研究2 小时前
使用JavaScript实现轮播图的自动切换和左右箭头切换效果
开发语言·前端·javascript·css·html
伍哥的传说5 小时前
Radash.js 现代化JavaScript实用工具库详解 – 轻量级Lodash替代方案
开发语言·javascript·ecmascript·tree-shaking·radash.js·debounce·throttle
程序视点6 小时前
IObit Uninstaller Pro专业卸载,免激活版本,卸载清理注册表,彻底告别软件残留
前端·windows·后端
前端程序媛-Tian6 小时前
【dropdown组件填坑指南】—怎么实现下拉框的位置计算
前端·javascript·vue
iamlujingtao6 小时前
js多边形算法:获取多边形中心点,且必定在多边形内部
javascript·算法
嘉琪0016 小时前
实现视频实时马赛克
linux·前端·javascript
烛阴7 小时前
Smoothstep
前端·webgl
十盒半价7 小时前
React 性能优化秘籍:从渲染顺序到组件粒度
react.js·性能优化·trae
若梦plus7 小时前
Eslint中微内核&插件化思想的应用
前端·eslint
爱分享的程序员7 小时前
前端面试专栏-前沿技术:30.跨端开发技术(React Native、Flutter)
前端·javascript·面试