Выбор переключателей радио на регулярном интервале не работает

Question

Я хочу автоматически менять выбор на переключателях с регулярным интервалом. Я вызываю setTimeOut в цикл for через каждые 2000 мс, но выбор переключателя не меняется в отношении установленного мною интервала. Вот мой код: 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(); 

выше Solut ion дает мне бесконечный цикл, когда выбор переключателя изменяется после каждых 2000 мс и останавливается, как только мой фокус будет на элементе 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 сразу, использовать глобальные переменные для счетчика вместо для цикла, и добавить 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)};