简单实现任务插入

最新推荐文章于 2024-11-03 16:40:52 发布

今天也想MK代码

最新推荐文章于 2024-11-03 16:40:52 发布

阅读量191

点赞数 1

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/weixin_42429220/article/details/137334760

版权

文章介绍了如何使用JavaScript设计一个遵循任务单一原则的系统，通过数组存储任务并利用requestIdleCallback实现按优先级执行的任务调度，确保在执行基础任务的同时，高优先级任务能够插队处理。

摘要由CSDN通过智能技术生成

效果

在执行某一个任务中，可以添加其他任务进去执行。
例如：打印 “1” 过程中，突然想打印“2”；
结果： 11111211112

思路

1、把任务用数组保存起来，执行时就弹出数组中的任务
2、任务单一原则设计
3、插入任务时，直接把任务插入数组中即可

代码

任务单一原则

function task() {
  const startTime = performance.now();
  let span = document.createElement('span');
  span.innerText = 1;

  while (performance.now() - startTime < 1) {
    // 阻塞 1 ms
  }
  container.appendChild(span);
}

function highPriorityTask() {
  const startTime = performance.now();
  let span = document.createElement('span');
  span.style.color = 'red';
  span.innerHTML = '<strong>插队任务</strong>';

  while (performance.now() - startTime < 1) {
    // 阻塞 1 ms
  }
  container.appendChild(span);
}

初始化任务

const taskQueue = Array.from({ length: 1000 }, () => task);

执行任务

function performWorkUnit() {
  // 任务执行完毕后结束递归
  if (taskQueue.length === 0) {
    btn.innerText = '执行';
    return;
  }

  requestIdleCallback((deadline) => {
    let task;
    while (
      (task = taskQueue.pop()) &&
      !deadline.didTimeout &&
      deadline.timeRemaining() > 0
    ) {
      task();
    }
    performWorkUnit();
  });
}