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绑定到函数的外部，这样，在单击时将x重新分配给0时，{ {1}}可以看到更改。由于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);
}

Answer 2

为此，

您必须清除上一个计时器，

尝试下面的代码。

选中 clearTimeout（time）; 这行。

var time=null;
function loader(x){
  if(x <= 100){
    time = 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;
    clearTimeout(time);
    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>

JavaScript的重复循环

2 个答案: