javascript - 模拟点击所有单选按钮并不断循环

Question

场景

我目前有 3 个单选按钮，我希望每 2 秒点击一次。这将不断循环，直到我按下“停止”按钮。

HTML

<div id="gen">
    <input type="radio" id="radio1" name="radios" />
    <input type="radio" id="radio2" name="radios" />
    <input type="radio" id="radio3" name="radios" />

    <div id="genBtn">
        <button type="button" id="stopBtn">Stop</button>
    </div>
</div>

JavaScript

$(document).ready(function() {

    /* Every 2 seconds, click each radio button */
    var rollDemRadios = setInterval(function() {
        $('input[name="radios"]').each(function() {
            // You can only see the last one clicked after about 3 seconds
            $(this).click();
        });
    }, 2000);

    /* Stops the radio buttons from rolling */
    $('#stopBtn').click(function() {
        clearInterval(rollDemRadios);
    });
});

视觉呈现

•(click) • •

• •(click) • // after 2 seconds

• • •(click) // another 2 seconds, then click the first one again

[Stop]

fiddle :http://jsfiddle.net/3xeyf/5/

问题

为什么我只能看到最后一个单选按钮被点击，而不是“每 2 秒每个单选按钮”？

此外，我如何连续循环所有 3 个单选按钮(单击最后一个单选按钮后，从第一个单选按钮开始)？

尝试

• 用 setTimeout() 或 setInterval() 将 $(this).click() 括起来，使点击对用户可见.
• 在 setInterval() 中添加了一个 while(true) 以连续循环。不聪明，但值得一试!

Answer 1

问题在于代码的设置方式。解释一下:

var rollDemRadios = setInterval(function() {
    $('input[name="radios"]').each(function() {
        $(this).click();
    });
}, 2000);

为了简化事情，让我们去掉中间位。

var rollDemRadios = setInterval(function() {
    DoYourWork();
}, 2000);

那么，这段代码中发生了什么？就像您所期望的那样，浏览器将每 2 秒运行一次 DoYourWork() 方法。假设它向您显示一个警告框。这意味着您将每 2 秒看到一个警告框。

但是您没有显示警告框。你在做什么是这样的:

    $('input[name="radios"]').each(function() {
        $(this).click();
    });

这是做什么的？对于找到的每个按钮，它都会单击它。非常简单地说:

    firstRadioButton.click();
    secondRadioButton.click();
    thirdRadioButton.click();

我们将此操作称为“依次单击三个按钮”。我稍后会使用这个名称。

代码会在这三个点击事件之间等待吗？不，为什么不呢？你没有要求它。您只要求它在单击所有三个按钮后等待。

基本上是这样的:

• 第一个间隔
• “依次点击三个按钮”。请注意，三次点击之间没有设置时间。这些按钮将以您的浏览器所能达到的最快速度被点击。
• 等待两秒钟...
• 第二个间隔(第一个间隔后两秒)
• “依次点击三个按钮”。请注意，三次点击之间没有设置时间。这些按钮将以您的浏览器所能达到的最快速度被点击。
• 等等...

您无法察觉三个按钮被点击，因为浏览器比您的眼睛快得多。您需要做的是告诉浏览器点击每个按钮后等待。在您当前的示例中，您告诉它在单击所有按钮后等待。这是您问题的根本原因。

这应该均匀地间隔点击，每次点击等待 2 秒而不是每批点击:

var radiobuttons = $('input[name="radios"]');
var i = 0;

var rollDemRadios = setInterval(function() {
    var currentbutton = radiobuttons[i];

    currentbutton.click();

    i = (i + 1) % radiobuttons.length; //0, then 1, then 2, then 0, then 1, then 2, then 0, ...

}, 2000);