javascript - 清空数组并清除Javascript中的所有间隔

Question

我正在尝试清空或重置数组，如下所示。我有两个<li>，每个都设置为 0。一旦第一个<li>达到 5，我希望它停止递增，一旦第二个<li>达到 10，我也希望它停止递增，这是通过使用 setInterval 函数完成的，每个函数都有自己的变量动态名称intervals[number] = seInterval().

默认情况下，我想调用 get_default() 函数，以便它开始递增。正如您在下面看到的，一旦第二个<li>完成，我想提醒intervals数组中的值。起初，它给我“1,2”，然后在第二次点击时，“6,7”，然后在第三次点击“9,10”等等。

我的问题是，为什么它没有给我一个值，"0,1"因为这些是我传递的值，get_result(0); get_result(1);并且一旦用户单击重置按钮，是否有正确的方法来清除或重置正在运行的所有间隔？

var intervals = [];

function get_result(number) {
  clearInterval(intervals[number]);
  intervals[number] = setInterval(function() {

    var total_count = parseInt($('ul li:eq(' + number + ')').html());
    var increment = total_count + 1;

    $('ul li:eq(' + number + ')').html(increment);

    if (number == 0 && increment == 5) {
      clearInterval(intervals[number]);
    }

    if (number == 1 && increment == 10) {
      clearInterval(intervals[number]);
      console.log(intervals);
    }
  }, 1000);

}

//Default
function get_default() {
  get_result(0);
  get_result(1);
}

//Run on default
get_default();


$('input').click(function() {
  //Reset
  intervals = [];
  $('li').html(0);
  get_default();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<ul>
  <li>0</li>
  <li>0</li>
</ul>

<input type="button" value="Reset">

标签： javascriptjquerysetinterval

Answer 1

根据MDN setTimeout 返回一个数值。

返回的 intervalID 是一个数字的非零值，用于标识调用 setInterval() 创建的计时器；可以将此值传递给 WindowOrWorkerGlobalScope.clearInterval() 以取消超时。

在运行代码片段时，我们看到 setTimeout 的 intervalID 从数组中注销。

在我的代码片段中，我已将区间数据类型更改为对象，这样我就可以将 get_result 参数存储为键，将区间 ID 存储为值。

希望这会帮助你。

var intervals = {};

function get_result(number) {
  clearInterval(intervals[number]);
  intervals[number] = setInterval(function() {

    var total_count = parseInt($('ul li:eq(' + number + ')').html());
    var increment = total_count + 1;

    $('ul li:eq(' + number + ')').html(increment);

    if (number == 0 && increment == 5) {
      clearInterval(intervals[number]);
    }

    if (number == 1 && increment == 10) {
      clearInterval(intervals[number]);
      console.log(intervals);
    }
  }, 1000);

}

//Default
function get_default() {
  get_result(0);
  get_result(1);
}

//Run on default
get_default();


$('input').click(function() {
  //Reset
  intervals = {};
  $('li').html(0);
  get_default();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<ul>
  <li>0</li>
  <li>0</li>
</ul>

<input type="button" value="Reset">