时间戳

首页 > 解决方案 > 避免 setInterval jquery 中的等待时间

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

问题描述

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

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>

标签： jquery

解决方案

创建一个具有该间隔的函数 - 并调用它！
不要忘记使用.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>

推荐阅读