在循环语句里面element重复提示最后一条的解决办法

做项目时遇到了个问题，要求把时间重叠的每个阶段都提示出来 但是发现$message的提示框不仅都重合在一起 并且数据内容只是最后一次循环出来的信息如下图

• 首先解决样式重合问题 这里我就用的是简单粗暴的方法加个定时器 这样重合问题就可以解决
• 其次是提示内容只是最后一次循环里的数据，这里我使用的是自执行函数（也是学以致用上了）

代码如下

let overlap = false // 轮转时间重叠
      for (let i = 1; i < begin.length; i++) {
        let a = begin[i]; // 开始时间
        let b = over[i - 1] // 上一阶段的结束时间
        ;((a,b) => {
          if (a <= b) {
            overlap = true
            var t = setTimeout(() => {
              this.$message.error(`轮转阶段${i + 1}和轮转阶段${i}的时间冲突`);
              clearTimeout(t)
            }, 10)
          }
        })(a,b)
      }
      if (overlap) return

成功解决

======================================================================

2024.8.21记录

上面的代码只能支持相邻的两个阶段比较 但是需求里是需要每一个阶段之间都需要比较所以进行了改造

代码如下

doTimePeriodsOverlap (periods) {
      let hasOverlap = false
      for (let i = 0; i < periods.length; i++) {
        const currentPeriod = periods[i];
        for (let j = i + 1; j < periods.length; j++) {
          const otherPeriod = periods[j];
          ;((currentPeriod, otherPeriod) => {
            if (currentPeriod[1] >= otherPeriod[0] && currentPeriod[0] <= otherPeriod[1]) {
              hasOverlap = true // 发生重叠
              var t = setTimeout(() => {
                this.$message.error(`轮转阶段${i + 1}和轮转阶段${j + 1}的时间冲突`);
                clearTimeout(t)
              }, 10)
            }
          })(currentPeriod, otherPeriod)
        }
      }
      return hasOverlap; // 没有发生重叠
    },

在提交代码中进行调用

var timeArr = list.map(v => {return [v.tpStartTime, v.tpEndTime]})
      console.log(timeArr, 'timeArrtimeArrtimeArr')
      const hasOverlap = this.doTimePeriodsOverlap(timeArr); // 轮转阶段是否发生重叠
      console.log(hasOverlap, `=====${hasOverlap}`)
      if (hasOverlap) return
      console.log('校验通过！！！！！！！')


// timeArr的格式（这里举个我自己项目里面的例子 大家根据需要进行修改）

timeArr = [
    [
        "2024-09-01",
        "2024-09-02"
    ],
    [
        "2024-09-01",
        "2024-09-05"
    ],
    [
        "2024-09-05",
        "2024-09-06"
    ]
]