jquery - 避免 setInterval jquery 中的等待时间

Question

我正在使用此脚本，其中 li 内容每 10 秒就会显示在 input 中。它工作正常......但是......

在首次点击按钮后，我必须等待 10 秒才能开始执行代码...

如何避免这种行为？我只是希望脚本立即开始。

$("button").on("click", function() {
  var items = $(".menu li"), idx = 0;

  var timer = setInterval(function() {
    var currText = items.eq(idx).text()
    if (idx < items.length - 1) idx++;
    else idx = 0;
    
    
    $("#show").val(currText);
 
  }, 10000);
});

input {
  width: 40px;
  height: 40px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<button>show li in order every 10 seconds</button>

<input type=text id="show" />
<ul class="menu">

  <li>A</li>
  <li>B</li>
  <li>C</li>
  <li>D</li>
  <li>E</li>
</ul>

Answer 1

创建一个具有该间隔的函数 - 并调用它!
不要忘记使用 .one() 而不是 .on()

var items = $(".menu li"), $show = $('#show'), idx = 0, timer = null;

function doIt () {
  var currText = items.eq(idx).text()
  if (idx < items.length - 1) idx++;
  else clearInterval(timer);
  $show.val(currText);
  timer = setInterval(doIt, 1000);
}

$("button").one("click", doIt);

input {
  width: 40px;
  height: 40px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<button>show li in order every 10 seconds</button>

<input type=text id="show" />
<ul class="menu">
  <li>A</li>
  <li>B</li>
  <li>C</li>
  <li>D</li>
  <li>E</li>
</ul>