javascript 重复循环有问题

Question

我是英语和 Javascript 新手，尝试理解我所说的内容

问题是当它在1%-99%之间时点击它会闪退和前进，我想重置它，而不是添加新的。每次我点击它时，它都会重置为 0%，然后停止在 100%。我只是不想让它闪烁。

function loader(x){
  if(x <= 100){
    setTimeout(function(){
      $(".bar").width(x + '%');
      $(".front .bar").text(x + "%");
      x++;
      loader(x);
    }, 1000 / 15);
  }
}
loader(0);

$(document).ready(function(){
  $(".progressbar-wrapper").click(function(){
    x = 0;
    loader(x);
  });
});

body{
    background:#cccccc;
}
.progressbar-wrapper {
    width: 300px;
    height: 60px;
    top: 50%;
    left: 50%;
    position: absolute;
    transform: translate(-50%, -50%);
}
.progressbar {
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: all 500ms;
}
.bar {
    position:absolute;
    height:100%;
    background-color: rgba(225, 0, 120, 0.6);
    box-shadow: 5px 5px 50px 5px rgba(225, 0, 120, 0.3);
}

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<div class="progressbar-wrapper">
     <div class="progressbar">
          <div class="side front">
               <div class="bar"></div>
          </div>
     </div>
</div>

Answer 1

最简单的解决方法是让您的x绑定(bind)外部的函数，这样当 x被重新分配给0单击后，loader可以看到变化。因为loader已经是递归的，无需初始化另一个 loader()单击时:

let x = 0;

function loader() {
  if (x < 100) x++;
  setTimeout(function() {
    $(".bar").width(x + '%');
    $(".front .bar").text(x + "%");
    loader(x);
  }, 1000 / 15);
}

$(document).ready(function() {
  loader();
  $(".progressbar-wrapper").click(function() {
    x = 0;
  });
});

body {
  background: #cccccc;
}

.progressbar-wrapper {
  width: 300px;
  height: 60px;
  top: 50%;
  left: 50%;
  position: absolute;
  transform: translate(-50%, -50%);
}

.progressbar {
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: all 500ms;
}

.bar {
  position: absolute;
  height: 100%;
  background-color: rgba(225, 0, 120, 0.6);
  box-shadow: 5px 5px 50px 5px rgba(225, 0, 120, 0.3);
}

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<div class="progressbar-wrapper">
  <div class="progressbar">
    <div class="side front">
      <div class="bar"></div>
    </div>
  </div>
</div>