自动循环单选按钮，也可以手动切换

Question

我试图通过 jquery 每 5 秒自动迭代一次单选按钮；但是，当我手动切换按钮时，我需要该功能也能运行。这是我到目前为止所拥有的：

$(document).ready(function () {
  
  (function news() {
    
    if ($('#pabnews_slide1').is(':checked')) {
      $('#pabnews_slide2').prop('checked', true)
    }
    else if ($('#pabnews_slide2').is(':checked')) {
      $('#pabnews_slide3').prop('checked', true)
    }
    else if ($('#pabnews_slide3').is(':checked')) {
      $('#pabnews_slide4').prop('checked', true)
    }
    else if ($('#pabnews_slide4').is(':checked')) {
      $('#pabnews_slide1').prop('checked', true)
    }
    
    setTimeout(news, 5000);
    
  })();
  
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<input name="slideshow" id="pabnews_slide1" type="radio" checked />
<label for="pabnews_slide1">A</label>
<input name="slideshow" id="pabnews_slide2" type="radio"/>
<label for="pabnews_slide2">B</label>
<input name="slideshow" id="pabnews_slide3" type="radio" />
<label for="pabnews_slide3">C</label>
<input name="slideshow" id="pabnews_slide4" type="radio" />
<label for="pabnews_slide4">D</label>

它有效，但我的问题是该函数每 5 秒调用一次，并且当我手动切换按钮时计时器不会返回到 0。你会怎样做呢？

更清楚地说，在当前状态下，当你等待 3 秒并手动切换按钮时，该函数仅在 2 秒后调用，我需要将其设置为 5。

Answer 1

出现问题的原因是设置超时并不会消除可能已设置的任何其他超时。

因此，当用户单击时，现有超时 (A) 还剩 2 秒运行，您设置另一个超时 (B)，该超时将在 5 秒后运行。

2 秒后，现有超时 A 功能运行，同时移动突出显示，并设置另一个超时 (C) 5 秒。

再过 3 秒后，B 超时并移动突出显示并设置另一个超时 D。

等等。

正如其他人评论的那样，您需要记住您设置的任何超时，并确保在设置另一个超时之前清除它，这样在下一个函数运行之前总是有 5 秒的时间，除非用户通过单击进行干预。

$(document).ready(function() {
  let timer = 0;
  (function news() {
    clearTimeout(timer);

    if ($('#pabnews_slide1').is(':checked')) {
      $('#pabnews_slide2').prop('checked', true)
    } else if ($('#pabnews_slide2').is(':checked')) {
      $('#pabnews_slide3').prop('checked', true)
    } else if ($('#pabnews_slide3').is(':checked')) {
      $('#pabnews_slide4').prop('checked', true)
    } else if ($('#pabnews_slide4').is(':checked')) {
      $('#pabnews_slide1').prop('checked', true)
    }
    timer = setTimeout(news, 5000);

  })();

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<input name="slideshow" id="pabnews_slide1" type="radio" checked />
<label for="pabnews_slide1">A</label>
<input name="slideshow" id="pabnews_slide2" type="radio" />
<label for="pabnews_slide2">B</label>
<input name="slideshow" id="pabnews_slide3" type="radio" />
<label for="pabnews_slide3">C</label>
<input name="slideshow" id="pabnews_slide4" type="radio" />
<label for="pabnews_slide4">D</label>