Javascript 无法理解setInterval（）的工作原理

我必须按升序排列一串竖条。所以我对这一部分进行了很好的编码，但问题出现在我尝试给条形图上色时。我已经生成了一个随机条列表

所以，程序将前两个条涂成“红色”，然后交换它们，然后颜色变回“绿色”。这一直持续到所有东西都按升序排序。但我面临的问题是，在所有东西都被分类之后，前两个条不断地从绿色变为红色。即使在停止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
});

//用于排序的函数
重置（）；
$（“.btn”）。单击（函数bubbleSort（）{
设flag=0；
对于（设i=0；问题是作用域-
var
始终是最近的
函数
，因此整个
bubbleSort
都有一个变量。将其更改为
let main=setItnerval…
这样每个循环都有一个不同的实例。@freedomn-m Dude拜托，mahn，我已经尝试了很长时间了，你确实解决了这个问题斯坦利xD。非常感谢！！！！有时只需要第二双眼睛。：）