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]

小提琴：http://jsfiddle.net/3xeyf/5/

问题

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

另外，如何连续循环所有3个单选按钮（点击最后一个单选按钮后，重新开始到第一个单选按钮）？

尝试

使用$(this).click()或setTimeout()附上setInterval()，以便用户可以看到点击。
在while(true)内添加了setInterval()以便循环播放。不聪明，但值得一试！

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();

让我们调用此操作＆＃34;依次单击三个按钮＆＃34;。我稍后会使用此名称。

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

这基本上就是这样：

第一个间隔
＆＃34;依次单击三个按钮＆＃34;。请注意，三次点击之间没有时间设置。这些按钮将按照浏览器的速度点击。
等待两秒......
第二个间隔（第一个间隔后两秒）
＆＃34;依次单击三个按钮＆＃34;。请注意，三次点击之间没有时间设置。这些按钮将按照浏览器的速度点击。
等......

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

这应该均匀地分隔点击次数，每次点击等待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);

Answer 2

尝试

$(document).ready(function () {

    var index = 0,
        $inps = $('input[name="radios"]'),
        len = $inps.length;
    /* Every 2 seconds, click each radio button */
    var rollDemRadios = setInterval(function () {
        $inps.eq(++index % len).click();
    }, 2000);

    $inps.first().click();

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

演示：Fiddle

Answer 3

您可以使用变量

跟踪下一个要点击的女巫电台

$(document).ready(function() {
    var current = 0;
    /* Every 2 seconds, click each radio button */
    var rollDemRadios = setInterval(function() {
        $('input[name="radios"]').eq(current).click();
        if (current == 2) { current = 0; } else { current ++; }
   }, 2000);

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

Fiddle

Answer 4

这应该有效：

http://jsfiddle.net/3xeyf/7/

$(document).ready(function() {
    var rdoIndex = 0;    
    /* Every 2 seconds, click each radio button */
    var rollDemRadios = setInterval(function() {
        var rdoCount = $('input[name="radios"]').length;
        $('input[name="radios"]:eq(' + rdoIndex%rdoCount + ')').click();
        rdoIndex++;        
    }, 2000);

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

在这里，您可以跟踪当前单击的单选按钮，并对索引模数执行总计单选按钮的计数，以便连续循环遍历索引0-2。

Answer 5

请在$ document.ready（function（）{}）;

中尝试以下代码

var i=0;    
var rollDemRadios = setInterval(function() {
    if(i===3)
    {
        i=0;
    }
    $('input[name="radios"]:eq('+i+')').click();
    i++;
}, 2000);

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

此致

Answer 6

只需输入setTimeout逻辑

var i = 0;
var stop = false;
$(document).ready(function() {
 CheckRadio();
$("#stopBtn").click(function(){
    stop = true;
});

});

function CheckRadio()
{if(!stop){
$($("input[type='radio']")[i]).click();
i +=1;

setTimeout(function(){
     if(i > 2) i =0;
     CheckRadio();

},2000);
}
}

Fiddle

模拟单击所有单选按钮并连续循环

6 个答案: