定期选择单选按钮不起作用答案

【问题标题】：Radio buttons selection on regular interval is not working定期选择单选按钮不起作用
【发布时间】：2017-02-08 10:24:06
【问题描述】：

我想定期自动更改单选按钮上的选择。我在每 2000 毫秒后在 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/

感谢您的帮助。

【问题讨论】：

setTimeout 期望被传递一个函数。您正在传递autoSlide(n) 的返回值，即undefined。同样，您必须为window.onload 分配一个函数。目前您正在分配autoSlideCarousel() 的返回值，也就是undefined。 “我每 2000 毫秒后在 for 循环中调用 setTimeOut” 不，你没有。循环不会等到超时发生。它将几乎立即调用setTimeout 三遍。这些都是之前讨论过的问题，例如setTimeout() is not waiting

标签： javascript settimeout

【解决方案1】：

为了避免同时运行所有 3 个 setTimeouts，请使用全局变量作为计数器而不是 for 循环，并将 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)};

【讨论】：

如上一条评论中提到的，这是不正确的：window.onload = autoSlide(n);这会将 assignSlide 的返回值分配给 window.onload，这很可能不是您想要的。您希望将函数本身分配给 window.onload。
@mangotang 是对的，对不起。最后一行应该是 window.onload = function() {autoSlide(n)};

【解决方案2】：

改用setInterval，如下所示：

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

【讨论】：

【解决方案3】：

我正在使用代码并最终得到以下解决方案： 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();

上面的解决方案给了我无限循环，其中单选按钮的选择每 2000 毫秒后更改一次，一旦我的焦点放在 Carousel div 元素上，就会停止。 https://jsfiddle.net/16zmfb12/13/

【讨论】：