Javascript - setInterval，如果选中复选框，则交替检查收音机（无库）答案

【问题标题】：Javascript - setInterval, if checkbox checked then check radio alternately (no-library)Javascript - setInterval，如果选中复选框，则交替检查收音机（无库）
【发布时间】：2014-08-22 14:36:28
【问题描述】：

我想将步行呈现为带有单选按钮的复选框。每 2 秒，角色开始移动的概率为 30%，停止的概率为 30%。如果选中该复选框，则表示角色正在移动。第二个和第三个单选按钮表示角色前面的左腿或右腿。我知道在代码中添加多个 setTimeout 会犯很大的错误。

所以我想做的是：如果复选框被选中，单选按钮（2nd,3rd）应该交替改变它的值。如果未选中，则选中第一个单选按钮。

在移动吗？ [] 腿：（*）| () ()

在移动吗？ [✓] 腿：() | ( *) ()

在移动吗？ [✓] 腿：() | () (*)

在移动吗？ [✓] 腿：() | ( *) () ....

var move = document.getElementById('movement');
var leg = document.getElementsByName('legs');
var m;

function moving() {
    m = Math.random() * 10;
    if (m < 3) {
        move.checked = true;
    } else if (m < 6) {
        move.checked = false;
        leg[0].checked = true;
    }
    if (move.checked == true) {
        leg[1].checked = true;
        setTimeout(leg[2].checked = true, 500);
        setTimeout(leg[1].checked = true, 1000);
        setTimeout(leg[2].checked = true, 1500);
    }
}
setInterval(moving, 2000);

- FIDDLE -

【问题讨论】：

所以如果选中移动，那么你希望每 0.5 秒换一次腿？在我看来，您只需要摆脱 setTimeouts 并切换腿的检查状态。如果未选中移动，您还需要取消间隔，以便每 2 秒（可能）修改其值时，您可以开始和停止“行走”。

标签： javascript animation checkbox radio-button setinterval

【解决方案1】：

我将按如下方式进行设置。大约每 2 秒运行一个间隔来确定是否步行。一旦开始步行，第二个间隔大约每 0.5 秒走一步。

第一个间隔每 2 秒运行一次，如果它决定不行走，它会取消第二个间隔并停止行走。如果稍后它决定再次行走，它会再次开始第二个间隔。

希望cmets说清楚。

<script>

var walk = (function() {

  // Keep variables in a closure rather than global
  var moveBox, leg, m, walkInterval, i=0;

  return {

    init: function () {

      // Do setup, run every 2 seconds
      moveBox = document.getElementById('movement');
      leg = document.getElementsByName('legs');
      walk.stop();
      window.setInterval(function(){walk.start()}, 2000);
    },

    start: function () {
      m = Math.random() * 10 | 0;  // truncate for convenience

      // about 30% of the time, walk
      if (m < 3) {

        // If not already walking, start stepping every .5 seconds
        if (!walkInterval) {
          walkInterval = setInterval(function(){walk.move()},500);
console.log('starting to walk…');
        }

      // 60% of the time, don't walk
      } else {
         walk.stop()
console.log('stopped');
      }
    },

    move: function () {

      // If already moving, swap legs
      if (moveBox.checked) {
        leg[1].checked = !leg[1].checked;
        leg[2].checked = !leg[2].checked;

      // Otherwise, set to initial moving condition
      } else {
        moveBox.checked = true;
        leg[0].checked  = false;
        leg[1].checked  = true;
        leg[2].checked  = false;
       }
    },

    stop: function () {

      // Clear the interval if it's running
      if (walkInterval) {
        window.clearInterval(walkInterval);
        walkInterval = null;
      }

      // Set checkboxes to stopped condition
      moveBox.checked = false;
      leg[0].checked  = true;
      leg[1].checked  = false;
      leg[2].checked  = false;
    }      
  }
}());

window.onload = walk.init;

</script>


<table>
 <tr>
  <td>Is moving?<input type="checkbox" id="movement">
  <td>Legs<input type="checkbox" name="legs">|<input type="checkbox" name="legs">
                                              <input type="checkbox" name="legs">

【讨论】：