Question

我正在使用此脚本，其中li的内容每10秒显示在input中。可以...但是...

在最初单击button之后，我必须等待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>

避免在setInterval jQuery中等待时间

1 个答案: