javascript - 无法弄清楚 setInterval() 的工作原理

Question

我必须按升序对一堆垂直条进行排序。所以我已经很好地编码了这部分，但是当我尝试为条形着色时出现问题。我生成了一个随机条形列表

所以程序采用前两个条并将它们着色为“红色”，然后交换它们，然后颜色恢复为“绿色”。这一直持续到所有内容都按升序排序。但我面临的问题是，在所有内容都排序后，前两个条的颜色不断从绿色变为红色。即使在 setInterval() 函数停止后，前两个条的颜色也会不断变化。

下面是在 javascript 中实现这些功能的代码

//Function to sort
reset();
$(".btn").click(function bubbleSort(){
  let flag=0;
  for(let i=0;i<values.length-1;i++){
  flag=0;
  for(let j=0;j<values.length-1-i;j++){
      var main=setInterval(function swap(){

        if(values[j]>values[j+1]){
          let temp=values[j];
          values[j]=values[j+1];
          values[j+1]=temp;
          flag=1;

        if(j==0){
            $(".line1").css({"background-color":"red"});
            $(".line2").css({"background-color":"red"});
            setTimeout(function(){
            $(".line1").css({"height":values[j],"background-color":"#357d35"});
            $(".line2").css({"height":values[j+1],"background-color":"#357d35"});
          },500);
          }

            else if(j==1){
            $(".line2").css({"background-color":"red"});
            $(".line3").css({"background-color":"red"});
            setTimeout(function(){
            $(".line2").css({"height":values[j],"background-color":"#357d35"});
            $(".line3").css({"height":values[j+1],"background-color":"#357d35"});
          },500);
          }

        else if(j==2){
            $(".line3").css({"background-color":"red"});
            $(".line4").css({"background-color":"red"});
            setTimeout(function(){
            $(".line3").css({"height":values[j],"background-color":"#357d35"});
            $(".line4").css({"height":values[j+1],"background-color":"#357d35"});
          },500);
          }
        }//end of if statement

        else{
          if(j==0){
                $(".line1").css({"background-color":"red"});
                $(".line2").css({"background-color":"red"});
              setTimeout(function(){
              $(".line1").css({"background-color":"#357d35"});
              $(".line2").css({"background-color":"#357d35"});
            },500);
            }
        } //end of else statement
        setTimeout(function(){
          clearInterval(main);
        },5000);
    },550*(j+3));

  }//end of 'j' loop

  if(flag==0)
    break;
  }//end of 'i' loop
});

我尝试了各种更改，但不知何故我无法阻止前两个条在红色和绿色之间连续闪烁。

标签： javascripthtmljquerycsssorting