如何在间隔和动画中每次点击 div 提高速度？

Question

每次点击 div

我都需要提高动画速度

我现在有这样的东西，但根本不起作用。

var Exercise2 = {
  $sandbox: $('#exercise2 .sandbox'),
  $shield: $('#exercise2 .sandbox .shield'),
  $speed: 0.1,
  $left: $('#exercise2 .sandbox .shield').offset(),
  run: function() {
    this.$sandbox.empty();
    this.$sandbox.append($('<div>').addClass('shield'));
    var loop = null;

    function IntervalMenager(flag) {
      if (flag == true) {
        var loop = setInterval(function() {
          Exercise2.animateCircle(Exercise2.$speed)
        })

      } else {
        clearInterval(loop);
      }
    };
    $('#exercise2 .sandbox .shield').bind("click", function() {
      IntervalMenager(false)
      scoreExercise2.run();
      IntervalMenager(true)
    });
  },
  animateCircle: function(speed) {
    let left = $('#exercise2 .sandbox').width() - 100;
    let time = left / speed;
    let kolo = $('#exercise2 .sandbox .shield');
    kolo.animate({
      left: left
    }, time)
    kolo.animate({
      left: 0
    }, time)
  }
};
var scoreExercise2 = {
  $shot: 0,
  $text: $('#exercise2 shots'),
  $shield: $('#exercise2 .sandbox .shield'),
  run: function() {
    $('#exercise2 .shots').html("");
    $('#exercise2 .shots').append(scoreExercise2.$shot);
    scoreExercise2.$shot += 1;
    Exercise2.$speed *= 1.2;
  }
}

  .sandbox:empty {
  display: none
}
.sandbox {
  border: 1px solid #000;
  border-radius: 5px;
  padding: 5px;
  margin: 5px auto;
}

#exercise2 .sandbox .shield {
  width: 100px;
  height: 100px;
  border-radius: 50px;
  position: relative;
  left: 0%;
  background: radial-gradient(ellipse at center, yellow 0%, red 20%, blue 40%, black 60%, yellow 80%);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="exercise2">
  Number of shots =
  <div style="display: inline-block;" class="shots"></div>

  <div class="sandbox">

  </div>
  <button onclick="Exercise2.run();scoreExercise2.run();">Turn on</button>
</div>

每次单击它都应该执行 clearInterval，然后以另一个速度再次执行此 Interval，但事实并非如此。当我再次通过按钮运行此功能时，它将具有新的速度，但 cricle 再次从头开始。我应该改变什么？

Answer 1

好的，我搞定了。想知道，有代码;)

var Exercise2 = {
  $sandbox: $('#exercise2 .sandbox'),
  $shield: $('#exercise2 .sandbox .shield'),
  $speed: 1,
  $direction: 1,
  $timer: null,
  $X: [$("#exercise2 .sandbox").position().left, $("#exercise2 .sandbox").width() + $("#exercise2 .sandbox").position().left - 87],
  run: function() {
    Exercise2.$timer = setInterval(function() {
      if ($('#exercise2 .sandbox .shield').position().left < Exercise2.$X[0] || $('#exercise2 .sandbox .shield').position().left > Exercise2.$X[1]) {
        Exercise2.$direction *= -1;
        Exercise2.$speed *= -1;
      }
      $("#exercise2 .sandbox .shield").animate({
        left: "+=" + Exercise2.$speed,
      }, 10)
    }, 30)
  },
  click: function() {
    this.$shield.bind("click", function() {
      clearInterval(Exercise2.$timer);
      scoreExercise2.run();
      if (Exercise2.$direction == 1) {
        Exercise2.$direction = 1;
        if (Exercise2.$speed < 0) {
          Exercise2.$speed *= -1;
        }
        Exercise2.$speed += 1;
      } else {
        Exercise2.$direction = -1;
        if (Exercise2.$speed > 0) {
          Exercise2.$speed *= -1;
        }
        Exercise2.$speed -= 1;
      }
      Exercise2.run();
    })
  },
};
var scoreExercise2 = {
  $shots: 1,
  $text: $('#exercise2 shots'),
  $shield: $('#exercise2 .sandbox .shield'),
  run: function() {
    $('#exercise2 .shots').html("");
    $('#exercise2 .shots').append(scoreExercise2.$shots);
    scoreExercise2.$shots += 1;
  }
}
Exercise2.click();

.sandbox:empty {
  display: none
}

.sandbox {
  border: 1px solid #000;
  border-radius: 5px;
  padding: 5px;
  margin: 5px auto;
}

#exercise2 .sandbox .shield {
  width: 100px;
  height: 100px;
  border-radius: 50px;
  position: relative;
  left: 0%;
  background: radial-gradient(ellipse at center, yellow 0%, red 20%, blue 40%, black 60%, yellow 80%);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="exercise2">
  Number of shots =
  <div style="display: inline-block;" class="shots"></div>

  <div class="sandbox">
    <div class="shield"></div>
  </div>
</div>

也许速度变快后出现了故障，但至少它是有效的。如果你愿意，你不能给我一些修复它的建议。

如何在间隔和动画中每次点击 div 提高速度？

How to increase speed every click on div in interval and animate?

jquery

jquery-animate

setinterval

clearinterval