定期的なラジオボタンの選択が機能しない

Question

ラジオボタンの選択を一定間隔で自動的に変更したい。 2000msごとにforループでsetTimeOutを呼び出していますが、ラジオボタンの選択は設定した間隔に関して変更されていません。 は、ここに私のコードです： HTML：

<input type="radio" id="carousel1" name="carousel" checked="checked"> 
<input type="radio" id="carousel2" name="carousel"> 
<input type="radio" id="carousel3" name="carousel"> 

Javascriptを：

function autoSlideCarousel() { 
    for (var n = 1; n <= 3; n++) { 
    setTimeout(autoSlide(n), 2000); 
    } 
} 

function autoSlide(n) { 
    console.log(n); 
    document.getElementById("carousel"+n).checked = true; 
}   

window.onload = autoSlideCarousel(); 

は、ここでより明確にするためJSFiddleリンクです：https://jsfiddle.net/16zmfb12/1/

はあなたの助けに感謝します。

Answer 1

私はコードで遊んで、次の解決策になってしまった： HTML：

<div id="carousel">CSS carousal</div> 
<br> 
<input type="radio" id="carousel1" name="carousel" checked="checked"> 
<input type="radio" id="carousel2" name="carousel"> 
<input type="radio" id="carousel3" name="carousel"> 

CSS：

#carousel { 
    width: 200px; 
    height: 200px; 
    padding:20px; 
    background: brown; 
    color: #fff; 
    text-align: center; 
    font-size: 36px; 
} 

Javascriptを：上記

var n = 0; 
window.ev = false; 
function autoSlide() { 
     document.getElementById("carousel").onmouseenter = function() { 
      window.ev = true; 
     }; 

     document.getElementById("carousel").onmouseleave = function() { 
      window.ev = false; 
      setTimeout(autoSlide, 2000); 
     }; 

     if (window.ev == false) { 
      n++; 
      if (n === 4) 
       n = 1; 
      document.getElementById("carousel" + n).checked = true; 
      setTimeout(autoSlide, 2000); 
     } 
    } 
    autoSlide(); 

ソルート私は、2000msごとにラジオボタンの選択が変わると無限ループになり、カルーセルdiv要素にフォーカスが入るとすぐに停止します。 https://jsfiddle.net/16zmfb12/13/

Answer 2

使用setInterval代わりに、このような何か：

function autoSlideCarousel() { 
    setInterval(function() { 
     if(n == 3) 
     n = 1; 
     else if(n == 2) 
     n = 3; 
     else 
     n = 2; 
     autoSlide(n) 
    }, 2000); 
} 

Answer 3

、一度にすべての3 setTimeoutsを実行しない代わりに、forループのカウンタのためのグローバルなVARを使用し、そして最後にsetTimeoutメソッドを追加するためには、 autoSlide（）関数の

var n = 1; 

function autoSlide(n) { 
    console.log(n); 
    document.getElementById("carousel"+n).checked = true; 
    if (n<3) { 
    setTimeout(function() {autoSlide(n+1)},2000); 
    } 
}   

window.onload = function() {autoSlide(n)};