增量值，不得超过特定变量

Question

我有下面的代码会自动增加一个数字。我想根据期望值增加数字。然后停止增量。请参见下面的代码

var expected_value = 1000;
var val = expected_value - 60;
$("#counter").val(val);

function numberFormat(n) {
  n += '';
  x = n.split('.');
  x1 = x[0];
  x2 = x.length > 1 ? '.' + x[1] : '';
  var rgx = /(\d+)(\d{3})/;
  while (rgx.test(x1)) {
    x1 = x1.replace(rgx, '$1' + ',' + '$2');
  }
  return x1 + x2;
}

(function loop() {
  setTimeout(function() {

    var counter = document.getElementById('counter');
    var current = parseInt(counter.value.replace(',', ''));

    var max_add = 1;
    var min_add = 1;

    if (counter.value == expected_value) {
      counter.value = true_value;
    } else {
      counter.value = numberFormat(current + Math.floor(Math.random() * max_add + min_add));
    }


    loop();
  }, 100);
}());

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="counter" type="text" readonly="true">

Answer 1

再次调用loop()之前，您需要检查是否达到所需的值

if (parseInt($("#counter").val()) != val)

var expected_value = 1000;
var val = expected_value - 60;
$("#counter").val(900);

function numberFormat(n) {
  n += '';
  x = n.split('.');
  x1 = x[0];
  x2 = x.length > 1 ? '.' + x[1] : '';
  var rgx = /(\d+)(\d{3})/;
  while (rgx.test(x1)) {
    x1 = x1.replace(rgx, '$1' + ',' + '$2');
  }
  return x1 + x2;
}

(function loop() {
  setTimeout(function() {

    var counter = document.getElementById('counter');
    var current = parseInt(counter.value.replace(',', ''));

    var max_add = 1;
    var min_add = 1;

    if (counter.value == expected_value) {
      counter.value = true_value;
    } else {
      counter.value = numberFormat(current + Math.floor(Math.random() * max_add + min_add));
    }

    if (parseInt($("#counter").val()) != val)
      loop();
  }, 100);
}());

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="counter" type="text" readonly="true">

Answer 2

您可以在递归循环调用之前验证循环值和期望值

var expected_value = 1000;
var val = expected_value - 60;
$("#counter").val(val);

function numberFormat(n) {
  n += '';
  x = n.split('.');
  x1 = x[0];
  x2 = x.length > 1 ? '.' + x[1] : '';
  var rgx = /(\d+)(\d{3})/;
  while (rgx.test(x1)) {
    x1 = x1.replace(rgx, '$1' + ',' + '$2');
  }
  return x1 + x2;
}
var val = 0;
(function loop() {
  setTimeout(function() {

    var counter = document.getElementById('counter');
    var current = parseInt(counter.value.replace(',', ''));

    var max_add = 1;
    var min_add = 1;

    if (counter.value == expected_value) {
      counter.value = true_value;
    } else {
      val = current + Math.floor(Math.random() * max_add + min_add);
      counter.value = numberFormat(val);
    }

    if (val !== expected_value) { //matching the loop value and expected value
      loop();
    }

  }, 100);
}());

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="counter" type="text" readonly="true">