Question

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

所以我想要做的是：如果选中复选框，则radiobuttons（2nd，3rd）应交替更改其值。如果未选中，则检查第一个radiobutton。

正在移动？ []腿：（*）| （）（）

正在移动？ [✓]腿：（）| （*）（）

正在移动？ [✓]腿：（）| （）（*）

正在移动？ [✓]腿：（）| （*）（）....

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 -

Answer 1

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

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

希望评论清楚明白。

<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">

Javascript - setInterval，如果选中复选框，则交替检查无线电（无库）

1 个答案: