时间戳

首页 > 解决方案 > 如何为JS上的每个单选按钮设置时间​​间隔？

javascript - 如何为JS上的每个单选按钮设置时间​​间隔？

问题描述

如何为每个单选按钮设置一个间隔，以便在单击每个按钮时，按钮会调用方法 randomArray() 每隔几秒从数组中随机化一个元素。低是每 3 秒，中是每 2 秒，并且每 1 秒高一次。

       <html><table><tr>
        <td width="20%">The difficulty level:</td>
        <td width="20%">
        <input type="radio" name="level" id ="low" onclick="difficulty()" value="low">low</input>
        <input type="radio" name="level" id="medium" onclick="difficulty()" 
        value="medium">medium</input>
        <input type="radio" name="level" id="high" onclick="difficulty()" value="high">high</input>
        </td></tr></table>
<script> 
function randomArray() 
{
    var option1 = getRandom();
    var option2 = getRandom(); 
    var option3 = getRandom();
    
    
    if (option1 == option2 || option1 == option3) 
    {
        option1 = getRandom();  
        //console.log(option1);
    } else {
        document.getElementById("option1").value = option1;
    }
    
    if (option2 == option1 || option2 == option3) 
    {
        option2 = getRandom();  
    } else {
        document.getElementById("option2").value = option2;
    }

    if (option3 == option2 || option3 == option1) 
    {
        option3 = getRandom();  
    } else {
        document.getElementById("option3").value = option3;
    }
}
function difficulty()
{
    if (document.getElementById("low").checked() = true)
    {
        var low = setInterval(randomArray, 3000); 
        
    } else if (document.getElementById("medium").checked() = true)
    {
        var med = setInterval(randomArray, 2000); 
    } else 
    {
        var high = setInterval(randomArray, 1000);
    }
} </script></html>

标签： javascript

解决方案

这是代码的重构。检查的是属性而不是功能。

let interval;

function difficulty(target) {
  clearInterval(interval);
  if (target.checked) {
    interval = setInterval(randomArray, target.value);
  }
}

function randomArray() {
  console.log('Calling randomArray');

}
<td width="20%">The difficulty level:</td>
<td width="20%">
  <input type="radio" name="level" value="1000" onclick="difficulty(this)" />low
  <input type="radio" name="level" value="2000" onclick="difficulty(this)" />medium
  <input type="radio" name="level" value="3000" onclick="difficulty(this)" />high
</td>

推荐阅读