带有进度条的选项卡脚本

Question

我为带有进度条的精美标签编写了一些脚本。 这是可行的，但我遇到了一个问题：我使用延迟来使进度条运行，当您单击 1 然后 3、4 或任何其他选项卡并返回到 1 时出现问题：进度条中断并留下彩色部分。

    var numberold = -1;

    function check(number) {
      var name = "year" + number;
      var nameold = "year" + numberold;
      var nametab = "tab" + number;
      var nametabold = "tab" + numberold;
      var circlename = "circle" + number;
      var circlenameold = "circle" + numberold;

      if (numberold === -1) {
        numberold = number;

      } else {
        //if (numberold != number) {
          document.getElementById(nameold).style.color = '#D7D7D7';
          document.getElementById(nametabold).style.visibility = 'hidden';
          document.getElementById(nametabold).style.opacity = '0';

          // if new tab later then old
          if (number > numberold) {
            var u = numberold;
            var i = numberold;
            (function() {
              if (i < number) {
                var linename = "line" + i;
                document.getElementById(linename).style.width = '100%';
                setTimeout(arguments.callee, 300);
                i++;
              }
            })();

            (function() {
              if (u <= number) {
                var circlenameold = "circle" + u;
                document.getElementById(circlenameold).style.backgroundColor = '#DBA741';
                setTimeout(arguments.callee, 300);
                u++;
              }
            })();
          }

          // if new tab earlier then old
          else {
            var u = numberold;
            var i = numberold-1;
            (function() {
              if (i >= number) {
                var linename = "line" + i;
                document.getElementById(linename).style.width = '0%';
                setTimeout(arguments.callee, 300);
                i--;
              }
            })();

            (function() {
              if (u > number) {
                var circlenameold = "circle" + u;
                document.getElementById(circlenameold).style.backgroundColor = '#D7D7D7';
                setTimeout(arguments.callee, 300);
                u--;
              }
            })();
          //}
        }
      }

      // style the active tab
      document.getElementById(circlename).style.backgroundColor = '#DBA741';
      document.getElementById(name).style.color = '#DBA741';
      document.getElementById(nametab).style.visibility = 'visible';
      document.getElementById(nametab).style.opacity = '1';

      numberold = number;
    }

    check(0);

    .year {
      color: #D7D7D7;
      width: 14.28%;
      float: left;
      padding-top: 20px;
      padding-bottom: 20px;
      cursor: pointer;
    }

    .years {
      margin-left: 10px;
      color: #D7D7D7;
      cursor: pointer;
      padding-top: 20px;
      padding-bottom: 20px;
      user-select: none;
    }

    .step {
      width: 14.28%;
      float: left;
      position: relative;
    }

    .line {
      height: 5px;
      background-color: #D7D7D7;
      width: 100%;
      margin-left: 50%;
      -webkit-transition: width .6s ease;
      -o-transition: width .6s ease;
      transition: width .6s ease;
    }

    .line-done {
      width: 0%;
      height: 100%;
      background-color: #DBA741;
      -webkit-transition: width .3s ease;
      -o-transition: width .3s ease;
      transition: width .3s ease;
    }

    .circle-base {
      width: 10px;
      height: 10px;
      position: absolute;
      bottom: -3%;
      left: 50%;
      background-color: #D7D7D7;
      border-radius: 100%;
    }

    .column {
      width: 20%;
      float: left;
      padding: 5px;
    }

    .block {
      box-shadow: 0px 1px 5px 1px #D7D7D7;
      padding: 5px;
    }

    .title {
      color: #DBA741;
    }

    .tab-base {
      position: absolute;
      visibility: hidden;
      opacity: 0;
      transition: 0.5s;
    }

    .progress-body {
      height: 5px;
      width: 88%;
      margin: 10px auto;
      overflow: hidden;
      background-color: #f5f5f5;
      border-radius: 4px;
      box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
    }
    .col-xs-12 {
      width: 100%;
      float:left;
}
    }

<div class="col-xs-10 col-xs-offset-1 text-center hidden-xs hidden-sm">

  <div class="row">



    <div class="col-xs-12" style="padding-bottom: 20px;">
      <div class="row">

        <div class="step">
          <div class="years" onclick="check(0)" id="year0">
            1964 - 1971
          </div>
          <div id="circle0" class="circle-base"></div>
          <div class="line">
            <div id="line0" class="line-done"></div>
          </div>
        </div>

        <div class="step">
          <div class="years" onclick="check(1)" id="year1">
            1964 - 1971
          </div>
          <div id="circle1" class="circle-base"></div>
          <div class="line">
            <div id="line1" class="line-done"></div>
          </div>
        </div>

        <div class="step">
          <div class="years" onclick="check(2)" id="year2">
            1964 - 1971
          </div>
          <div id="circle2" class="circle-base"></div>
          <div class="line">
            <div id="line2" class="line-done"></div>
          </div>
        </div>

        <div class="step">
          <div class="years" onclick="check(3)" id="year3">
            1964 - 1971
          </div>
          <div id="circle3" class="circle-base"></div>
          <div class="line">
            <div id="line3" class="line-done"></div>
          </div>
        </div>

        <div class="step">
          <div class="years" onclick="check(4)" id="year4">
            1964 - 1971
          </div>
          <div id="circle4" class="circle-base"></div>
          <div class="line">
            <div id="line4" class="line-done"></div>
          </div>
        </div>

        <div class="step">
          <div class="years" onclick="check(5)" id="year5">
            1964 - 1971
          </div>
          <div id="circle5" class="circle-base"></div>
          <div class="line">
            <div id="line5" class="line-done"></div>
          </div>
        </div>

        <div class="step">
          <div class="years" onclick="check(6)" id="year6">
            1964 - 1971
          </div>
          <div id="circle6" class="circle-base" style="bottom: -12%;"></div>
        </div>

      </div>
    </div>

  </div>

  <div class="col-xs-12">
    <div class="row">

      <div id="tab0" class="tab-base col-xs-10 col-xs-offset-1">
        <div class="row">

          <div class="column">
            <div class="block equal-height">
              <div class="title">
                title
              </div>
              <div class="text">
                test
              </div>
            </div>
          </div>
          <div class="column">
            <div class="block equal-height">
              <div class="title">
                title
              </div>
              <div class="text">
                test
              </div>
            </div>
          </div>
          <div class="column">
            <div class="block equal-height">
              <div class="title">
                title
              </div>
              <div class="text">
                test
              </div>
            </div>
          </div>
          <div class="column">
            <div class="block equal-height">
              <div class="title">
                title
              </div>
              <div class="text">
                test
              </div>
            </div>
          </div>
          <div class="column">
            <div class="block equal-height">
              <div class="title">
                title
              </div>
              <div class="text">
                test
              </div>
            </div>
          </div>

        </div>
      </div>


      <div id="tab1" class="tab-base col-xs-10 col-xs-offset-1">
        <div class="row">

          <div class="column">
            <div class="block equal-height">
              <div class="title">
                title
              </div>
              <div class="text">
                test
              </div>
            </div>
          </div>
          <div class="column">
            <div class="block equal-height">
              <div class="title">
              title
              </div>
              <div class="text">
                test
              </div>
            </div>
          </div>
          <div class="column">
            <div class="block equal-height">
              <div class="title">
                title
              </div>
              <div class="text">
                test
              </div>
            </div>
          </div>
          <div class="column">
            <div class="block equal-height">
              <div class="title">
                title
              </div>
              <div class="text">
                test
              </div>
            </div>
          </div>
          <div class="column">
            <div class="block equal-height">
              <div class="title">
                title
              </div>
              <div class="text">
                test
              </div>
            </div>
          </div>

        </div>

      </div>

      <div id="tab2" class="tab-base col-xs-10 col-xs-offset-1">
        <div class="row">

          <div class="column">
            <div class="block equal-height">
              <div class="title">
                title
              </div>
              <div class="text">
                test
              </div>
            </div>
          </div>
          <div class="column">
            <div class="block equal-height">
              <div class="title">
                title
              </div>
              <div class="text">
                test
              </div>
            </div>
          </div>
          <div class="column">
            <div class="block equal-height">
              <div class="title">
                title
              </div>
              <div class="text">
                test
              </div>
            </div>
          </div>
          <div class="column">
            <div class="block equal-height">
              <div class="title">
                title
              </div>
              <div class="text">
                test
              </div>
            </div>
          </div>
          <div class="column">
            <div class="block equal-height">
              <div class="title">
                title
              </div>
              <div class="text">
                test
              </div>
            </div>
          </div>

        </div>
      </div>

      <div id="tab3" class="tab-base col-xs-10 col-xs-offset-1">
        <div class="row">

          <div class="column">
            <div class="block equal-height">
              <div class="title">
                title
              </div>
              <div class="text">
                test
              </div>
            </div>
          </div>
          <div class="column">
            <div class="block equal-height">
              <div class="title">
                title
              </div>
              <div class="text">
                test
              </div>
            </div>
          </div>
          <div class="column">
            <div class="block equal-height">
              <div class="title">
                title
              </div>
              <div class="text">
                test
              </div>
            </div>
          </div>
          <div class="column">
            <div class="block equal-height">
              <div class="title">
                title
              </div>
              <div class="text">
                test
              </div>
            </div>
          </div>
          <div class="column">
            <div class="block equal-height">
              <div class="title">
                title
              </div>
              <div class="text">
                test
              </div>
            </div>
          </div>

        </div>
      </div>

      <div id="tab4" class="tab-base col-xs-10 col-xs-offset-1">
        <div class="row">

          <div class="column">
            <div class="block equal-height">
              <div class="title">
                title
              </div>
              <div class="text">
                test
              </div>
            </div>
          </div>
          <div class="column">
            <div class="block equal-height">
              <div class="title">
                title
              </div>
              <div class="text">
                test
              </div>
            </div>
          </div>
          <div class="column">
            <div class="block equal-height">
              <div class="title">
                title
              </div>
              <div class="text">
                test
              </div>
            </div>
          </div>
          <div class="column">
            <div class="block equal-height">
              <div class="title">
                title
              </div>
              <div class="text">
                test
              </div>
            </div>
          </div>
          <div class="column">
            <div class="block equal-height">
              <div class="title">
                title
              </div>
              <div class="text">
                test
              </div>
            </div>
          </div>

        </div>
      </div>

      <div id="tab5" class="tab-base col-xs-10 col-xs-offset-1">
        <div class="row">

          <div class="column">
            <div class="block equal-height">
              <div class="title">
                title
              </div>
              <div class="text">
                test
              </div>
            </div>
          </div>
          <div class="column">
            <div class="block equal-height">
              <div class="title">
                title
              </div>
              <div class="text">
                test
              </div>
            </div>
          </div>
          <div class="column">
            <div class="block equal-height">
              <div class="title">
                title
              </div>
              <div class="text">
                test
              </div>
            </div>
          </div>
          <div class="column">
            <div class="block equal-height">
              <div class="title">
                title
              </div>
              <div class="text">
                test
              </div>
            </div>
          </div>
          <div class="column">
            <div class="block equal-height">
              <div class="title">
                title
              </div>
              <div class="text">
                test
              </div>
            </div>
          </div>

        </div>
      </div>

      <div id="tab6" class="tab-base col-xs-10 col-xs-offset-1">
        <div class="row">

          <div class="column">
            <div class="block equal-height">
              <div class="title">
                title
              </div>
              <div class="text">
                test
              </div>
            </div>
          </div>
          <div class="column">
            <div class="block equal-height">
              <div class="title">
                title
              </div>
              <div class="text">
                test
              </div>
            </div>
          </div>
          <div class="column">
            <div class="block equal-height">
              <div class="title">
                title
              </div>
              <div class="text">
                test
              </div>
            </div>
          </div>
          <div class="column">
            <div class="block equal-height">
              <div class="title">
                title
              </div>
              <div class="text">
                test
              </div>
            </div>
          </div>
          <div class="column">
            <div class="block equal-height">
              <div class="title">
                title
              </div>
              <div class="text">
                test
              </div>
            </div>
          </div>

        </div>
      </div>
    </div>

  </div>
</div>

你可以试试这个

现在我很累，不知道如何解决这个问题。 我需要一个想法如何更改算法或为此找到独特的解决方案。 有人可以帮忙吗？

Answer 1

在上一个动画完成之前，您需要阻止任何动画。

我添加了两个变量finished1 和finished2，只有在所有动画都完成后才会是true

如果函数check(number)在false时被激活..函数必须等到它们变成true

就像一个交通信号;)

查看编辑后的JavaScript

    var numberold = -1;
	
    var finished1 = true;
    var finished2 = true;

    function check(number) {
	
        if(!finished1 || !finished2) {
            window.setTimeout(function(){ check(number) }, 100);
            return;
        }
		
      var name = "year" + number;
      var nameold = "year" + numberold;
      var nametab = "tab" + number;
      var nametabold = "tab" + numberold;
      var circlename = "circle" + number;
      var circlenameold = "circle" + numberold;

      if (numberold === -1) {
        numberold = number;

      } else {
        finished1 = false;
        finished2 = false;
		
        //if (numberold != number) {
          document.getElementById(nameold).style.color = '#D7D7D7';
          document.getElementById(nametabold).style.visibility = 'hidden';
          document.getElementById(nametabold).style.opacity = '0';

          // if new tab later then old
          if (number > numberold) {
            var u = numberold;
            var i = numberold;
            (function() {
              if (i < number) {
				
                var linename = "line" + i;
                document.getElementById(linename).style.width = '100%';
                setTimeout(arguments.callee, 300);
                i++;
              } else {
                finished1 = true;
              }
            })();

            (function() {
              if (u <= number) {
                var circlenameold = "circle" + u;
                document.getElementById(circlenameold).style.backgroundColor = '#DBA741';
                setTimeout(arguments.callee, 300);
                u++;
				
              } else {
                finished2 = true;
              }
            })();
          }

          // if new tab earlier then old
          else {
            var u = numberold;
            var i = numberold-1;
            (function() {
              if (i >= number) {
                var linename = "line" + i;
                document.getElementById(linename).style.width = '0%';
                setTimeout(arguments.callee, 300);
                i--;
              } else {
                finished1 = true;
              }
			  
            })();

            (function() {
              if (u > number) {
                var circlenameold = "circle" + u;
                document.getElementById(circlenameold).style.backgroundColor = '#D7D7D7';
                setTimeout(arguments.callee, 300);
                u--;
              } else {
                finished2 = true;
              }
			  
            })();
          //}
        }
      }

      // style the active tab
      document.getElementById(circlename).style.backgroundColor = '#DBA741';
      document.getElementById(name).style.color = '#DBA741';
      document.getElementById(nametab).style.visibility = 'visible';
      document.getElementById(nametab).style.opacity = '1';

      numberold = number;
    }

    check(0);

    .year {
      color: #D7D7D7;
      width: 14.28%;
      float: left;
      padding-top: 20px;
      padding-bottom: 20px;
      cursor: pointer;
    }

    .years {
      margin-left: 10px;
      color: #D7D7D7;
      cursor: pointer;
      padding-top: 20px;
      padding-bottom: 20px;
      user-select: none;
    }

    .step {
      width: 14.28%;
      float: left;
      position: relative;
    }

    .line {
      height: 5px;
      background-color: #D7D7D7;
      width: 100%;
      margin-left: 50%;
      -webkit-transition: width .6s ease;
      -o-transition: width .6s ease;
      transition: width .6s ease;
    }

    .line-done {
      width: 0%;
      height: 100%;
      background-color: #DBA741;
      -webkit-transition: width .3s ease;
      -o-transition: width .3s ease;
      transition: width .3s ease;
    }

    .circle-base {
      width: 10px;
      height: 10px;
      position: absolute;
      bottom: -3%;
      left: 50%;
      background-color: #D7D7D7;
      border-radius: 100%;
    }

    .column {
      width: 20%;
      float: left;
      padding: 5px;
    }

    .block {
      box-shadow: 0px 1px 5px 1px #D7D7D7;
      padding: 5px;
    }

    .title {
      color: #DBA741;
    }

    .tab-base {
      position: absolute;
      visibility: hidden;
      opacity: 0;
      transition: 0.5s;
    }

    .progress-body {
      height: 5px;
      width: 88%;
      margin: 10px auto;
      overflow: hidden;
      background-color: #f5f5f5;
      border-radius: 4px;
      box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
    }
    .col-xs-12 {
      width: 100%;
      float:left;
}
    }

<div class="col-xs-10 col-xs-offset-1 text-center hidden-xs hidden-sm">

  <div class="row">



    <div class="col-xs-12" style="padding-bottom: 20px;">
      <div class="row">

        <div class="step">
          <div class="years" onclick="check(0)" id="year0">
            1964 - 1971
          </div>
          <div id="circle0" class="circle-base"></div>
          <div class="line">
            <div id="line0" class="line-done"></div>
          </div>
        </div>

        <div class="step">
          <div class="years" onclick="check(1)" id="year1">
            1964 - 1971
          </div>
          <div id="circle1" class="circle-base"></div>
          <div class="line">
            <div id="line1" class="line-done"></div>
          </div>
        </div>

        <div class="step">
          <div class="years" onclick="check(2)" id="year2">
            1964 - 1971
          </div>
          <div id="circle2" class="circle-base"></div>
          <div class="line">
            <div id="line2" class="line-done"></div>
          </div>
        </div>

        <div class="step">
          <div class="years" onclick="check(3)" id="year3">
            1964 - 1971
          </div>
          <div id="circle3" class="circle-base"></div>
          <div class="line">
            <div id="line3" class="line-done"></div>
          </div>
        </div>

        <div class="step">
          <div class="years" onclick="check(4)" id="year4">
            1964 - 1971
          </div>
          <div id="circle4" class="circle-base"></div>
          <div class="line">
            <div id="line4" class="line-done"></div>
          </div>
        </div>

        <div class="step">
          <div class="years" onclick="check(5)" id="year5">
            1964 - 1971
          </div>
          <div id="circle5" class="circle-base"></div>
          <div class="line">
            <div id="line5" class="line-done"></div>
          </div>
        </div>

        <div class="step">
          <div class="years" onclick="check(6)" id="year6">
            1964 - 1971
          </div>
          <div id="circle6" class="circle-base" style="bottom: -12%;"></div>
        </div>

      </div>
    </div>

  </div>

  <div class="col-xs-12">
    <div class="row">

      <div id="tab0" class="tab-base col-xs-10 col-xs-offset-1">
        <div class="row">

          <div class="column">
            <div class="block equal-height">
              <div class="title">
                title
              </div>
              <div class="text">
                test
              </div>
            </div>
          </div>
          <div class="column">
            <div class="block equal-height">
              <div class="title">
                title
              </div>
              <div class="text">
                test
              </div>
            </div>
          </div>
          <div class="column">
            <div class="block equal-height">
              <div class="title">
                title
              </div>
              <div class="text">
                test
              </div>
            </div>
          </div>
          <div class="column">
            <div class="block equal-height">
              <div class="title">
                title
              </div>
              <div class="text">
                test
              </div>
            </div>
          </div>
          <div class="column">
            <div class="block equal-height">
              <div class="title">
                title
              </div>
              <div class="text">
                test
              </div>
            </div>
          </div>

        </div>
      </div>


      <div id="tab1" class="tab-base col-xs-10 col-xs-offset-1">
        <div class="row">

          <div class="column">
            <div class="block equal-height">
              <div class="title">
                title
              </div>
              <div class="text">
                test
              </div>
            </div>
          </div>
          <div class="column">
            <div class="block equal-height">
              <div class="title">
              title
              </div>
              <div class="text">
                test
              </div>
            </div>
          </div>
          <div class="column">
            <div class="block equal-height">
              <div class="title">
                title
              </div>
              <div class="text">
                test
              </div>
            </div>
          </div>
          <div class="column">
            <div class="block equal-height">
              <div class="title">
                title
              </div>
              <div class="text">
                test
              </div>
            </div>
          </div>
          <div class="column">
            <div class="block equal-height">
              <div class="title">
                title
              </div>
              <div class="text">
                test
              </div>
            </div>
          </div>

        </div>

      </div>

      <div id="tab2" class="tab-base col-xs-10 col-xs-offset-1">
        <div class="row">

          <div class="column">
            <div class="block equal-height">
              <div class="title">
                title
              </div>
              <div class="text">
                test
              </div>
            </div>
          </div>
          <div class="column">
            <div class="block equal-height">
              <div class="title">
                title
              </div>
              <div class="text">
                test
              </div>
            </div>
          </div>
          <div class="column">
            <div class="block equal-height">
              <div class="title">
                title
              </div>
              <div class="text">
                test
              </div>
            </div>
          </div>
          <div class="column">
            <div class="block equal-height">
              <div class="title">
                title
              </div>
              <div class="text">
                test
              </div>
            </div>
          </div>
          <div class="column">
            <div class="block equal-height">
              <div class="title">
                title
              </div>
              <div class="text">
                test
              </div>
            </div>
          </div>

        </div>
      </div>

      <div id="tab3" class="tab-base col-xs-10 col-xs-offset-1">
        <div class="row">

          <div class="column">
            <div class="block equal-height">
              <div class="title">
                title
              </div>
              <div class="text">
                test
              </div>
            </div>
          </div>
          <div class="column">
            <div class="block equal-height">
              <div class="title">
                title
              </div>
              <div class="text">
                test
              </div>
            </div>
          </div>
          <div class="column">
            <div class="block equal-height">
              <div class="title">
                title
              </div>
              <div class="text">
                test
              </div>
            </div>
          </div>
          <div class="column">
            <div class="block equal-height">
              <div class="title">
                title
              </div>
              <div class="text">
                test
              </div>
            </div>
          </div>
          <div class="column">
            <div class="block equal-height">
              <div class="title">
                title
              </div>
              <div class="text">
                test
              </div>
            </div>
          </div>

        </div>
      </div>

      <div id="tab4" class="tab-base col-xs-10 col-xs-offset-1">
        <div class="row">

          <div class="column">
            <div class="block equal-height">
              <div class="title">
                title
              </div>
              <div class="text">
                test
              </div>
            </div>
          </div>
          <div class="column">
            <div class="block equal-height">
              <div class="title">
                title
              </div>
              <div class="text">
                test
              </div>
            </div>
          </div>
          <div class="column">
            <div class="block equal-height">
              <div class="title">
                title
              </div>
              <div class="text">
                test
              </div>
            </div>
          </div>
          <div class="column">
            <div class="block equal-height">
              <div class="title">
                title
              </div>
              <div class="text">
                test
              </div>
            </div>
          </div>
          <div class="column">
            <div class="block equal-height">
              <div class="title">
                title
              </div>
              <div class="text">
                test
              </div>
            </div>
          </div>

        </div>
      </div>

      <div id="tab5" class="tab-base col-xs-10 col-xs-offset-1">
        <div class="row">

          <div class="column">
            <div class="block equal-height">
              <div class="title">
                title
              </div>
              <div class="text">
                test
              </div>
            </div>
          </div>
          <div class="column">
            <div class="block equal-height">
              <div class="title">
                title
              </div>
              <div class="text">
                test
              </div>
            </div>
          </div>
          <div class="column">
            <div class="block equal-height">
              <div class="title">
                title
              </div>
              <div class="text">
                test
              </div>
            </div>
          </div>
          <div class="column">
            <div class="block equal-height">
              <div class="title">
                title
              </div>
              <div class="text">
                test
              </div>
            </div>
          </div>
          <div class="column">
            <div class="block equal-height">
              <div class="title">
                title
              </div>
              <div class="text">
                test
              </div>
            </div>
          </div>

        </div>
      </div>

      <div id="tab6" class="tab-base col-xs-10 col-xs-offset-1">
        <div class="row">

          <div class="column">
            <div class="block equal-height">
              <div class="title">
                title
              </div>
              <div class="text">
                test
              </div>
            </div>
          </div>
          <div class="column">
            <div class="block equal-height">
              <div class="title">
                title
              </div>
              <div class="text">
                test
              </div>
            </div>
          </div>
          <div class="column">
            <div class="block equal-height">
              <div class="title">
                title
              </div>
              <div class="text">
                test
              </div>
            </div>
          </div>
          <div class="column">
            <div class="block equal-height">
              <div class="title">
                title
              </div>
              <div class="text">
                test
              </div>
            </div>
          </div>
          <div class="column">
            <div class="block equal-height">
              <div class="title">
                title
              </div>
              <div class="text">
                test
              </div>
            </div>
          </div>

        </div>
      </div>
    </div>

  </div>
</div>