JavaScript时间线区间分配技巧

对于一个文章开发者来说，牢固扎实的基础是十分重要的，golang学习网就来带大家一点点的掌握基础知识点。今天本篇文章带大家了解《JavaScript 时间线不重叠区间分配教程》，主要介绍了，希望对大家的知识积累有所帮助，快点收藏起来吧，否则需要时就找不到了！

本文介绍如何用 JavaScript 判断二维数组中各时间区间（起始/结束值）是否重叠，并基于重叠关系为每个条目分配连续、无冲突的编号范围（如 1-30），确保重叠项追加递增，非重叠项从 1 重新开始。

在处理时间线类数据（如任务调度、日程安排、音视频轨道标记）时，常需判断多个区间是否存在时间重叠，并据此生成逻辑上连续、视觉上可区分的标识序列。本教程提供一个健壮、易理解的解决方案，核心逻辑是：对每个新条目，向前检查所有已处理条目是否与其时间区间重叠；若存在重叠，则将其编号范围接续在当前最大结束编号之后；否则重置起始编号为 1，分配独立区间。

✅ 正确的重叠判断逻辑

两个区间 [a, b] 和 [c, d]（假设 a ≤ b, c ≤ d）发生重叠的充要条件是：

a <= d && c <= b

该公式简洁高效，覆盖全部重叠情形（包含、相交、边界接触），比多重 || 条件更可靠。原代码中冗余的三条件判断易出错且难以维护，应替换为此标准形式。

✅ 核心算法逻辑说明

• 使用 currentStart 和 currentEnd 动态维护当前已分配的最大编号区间终点；
• 遍历 timelineArray，对第 i 项：
  • 向前遍历 j = 0 到 i-1，用标准重叠公式判断是否与任一已处理项重叠；
  • 若无重叠：currentStart = currentEnd + 1，currentEnd = currentStart + incrementNum - 1（即新开一段）；
  • 若有重叠：仅 currentEnd += incrementNum（追加到当前段末尾）；
• 每次循环后记录结果：name, overlapMessage, currentStart-currentEnd。

✅ 完整可运行代码

function checkTimelineOverlap(timelineArray) {
  const result = [];
  let currentStart = 1;
  let currentEnd = 0; // 初始未分配，首项将触发重置

  for (let i = 0; i < timelineArray.length; i++) {
    const [name, startStr, endStr, incStr] = timelineArray[i];
    const start = parseInt(startStr, 10);
    const end = parseInt(endStr, 10);
    const increment = parseInt(incStr, 10);

    // 检查与之前所有项是否重叠
    const overlapNames = [];
    for (let j = 0; j < i; j++) {
      const [prevName, prevStartStr, prevEndStr] = timelineArray[j];
      const prevStart = parseInt(prevStartStr, 10);
      const prevEnd = parseInt(prevEndStr, 10);

      // 标准重叠判断：[start, end] 与 [prevStart, prevEnd] 有交集
      if (start <= prevEnd && prevStart <= end) {
        overlapNames.push(prevName);
      }
    }

    const overlapMessage = overlapNames.length > 0
      ? `overlap with ${overlapNames.join(", ")}`
      : "no overlap";

    if (overlapNames.length > 0) {
      // 重叠：延续当前段，仅扩展结束位置
      currentEnd += increment;
    } else {
      // 无重叠：开启新段，起始为 currentEnd + 1
      currentStart = currentEnd + 1;
      currentEnd = currentStart + increment - 1;
    }

    result.push(`${name}, ${overlapMessage}, ${currentStart}-${currentEnd}`);
  }

  return result;
}

// 测试数据（已修正语法错误：补全逗号、去重）
const timelineArray = [
  ["name1", "384", "456", "30"],
  ["name2", "72", "192", "30"],
  ["name3", "384", "456", "30"],
  ["name4", "384", "456", "15"],
  ["name5", "384", "576", "30"],
  ["name6", "96", "240", "12"],
  ["name7", "384", "456", "12"],
  ["name8", "1", "3", "12"]
];

console.log(checkTimelineOverlap(timelineArray));
// 输出符合预期：
// [
//   "name1, no overlap, 1-30",
//   "name2, no overlap, 31-60",
//   "name3, overlap with name1, 61-90",
//   "name4, overlap with name1, name3, 91-105",
//   "name5, overlap with name1, name3, name4, 106-135",
//   "name6, overlap with name2, 136-147",
//   "name7, overlap with name1, name3, name4, name5, 148-159",
//   "name8, no overlap, 160-171"
// ]

⚠️ 注意事项与优化建议

• 输入校验：生产环境应增加 isNaN() 检查，避免 parseInt 返回 NaN 导致计算异常；
• 性能考量：当前为 O(n²) 时间复杂度，适用于百级以内条目；若数据量大（如千级以上），建议改用区间树（Interval Tree）或排序+双指针优化至 O(n log n)；
• 边界语义：本实现将 [a,b] 与 [b,c] 视为接触但不重叠（因 b <= b && b <= b 成立 → 实际会判为重叠）。若需“端点不重叠”，可将条件改为 start < prevEnd && prevStart < end；
• 结果复用：返回的是字符串数组，如需结构化数据，可改为对象数组：{ name, overlap: [...], range: { start, end } }。

通过以上实现，你不仅能精准识别时间线重叠，还能生成符合业务逻辑的连续编号方案，为前端可视化或后端调度提供可靠基础。

本篇关于《JavaScript时间线区间分配技巧》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！