показывать текст li на ввод каждые 2 секунды

Question

После нажатия button я хочу отображать в input по порядку и каждые две секунды полный текст списка li

A -- B -- C -- D -- E

Я пробовал, но это не так рабочая

 <button>show li in order every 2 seconds</button>

 <input type=text id="show" />

$("button").on("click",function(){
		 $(".menu li").each(function(){
			 setTimeout(function() { $("show").($(this).text()); }, 2000);
  });
	});

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<button>show li in order every 2 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

Вам нужно использовать setInterval и устанавливать текст с .menu li постепенно

$("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;
    else clearInterval(timer); // Use this for clearing the timer
    
    $("#show").val(currText);
    if(idx > 0) items.eq(idx - 1).hide(); // Hide previous <li>
  }, 2000);
});

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<button>show li in order every 2 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 2

Вы можете использовать вложенный setTimout (также называемый цепочечным тайм-аутом) , чтобы выполнить sh, иначе результаты будут отображаться сразу в самом конце ( создается впечатление, что сработал только последний).

Метод pop() возвращает / удаляет последний элемент массива, поэтому мы хотим сначала повернуть массив так, чтобы символы были вытеснены в их первоначальном порядке. По твоему вопросу спец. Использование pop() дает нам быстрый способ запуска массива только один раз.

Я предпочитаю использовать вложенный setTimeout() вместо setInterval(), потому что setTimeout будет вызывать себя снова, как только он завершится, тогда как setInterval перезапускает себя по таймеру. Поэтому, если есть какая-либо задержка завершения функции, следующий setInterval все равно будет запускаться как запланировано , что означает, что несколько экземпляров функции могут складываться.

let arr = [];

$("button").click(function() {
   $('.menu li').each(function(){
      arr.push( $(this).text() );
   });
   arr = arr.reverse();
   showChars(arr);
});

function showChars(arr){
   if (arr.length === 0) return false;
   let chr = arr.pop();
   setTimeout(function(){
      $('#show').val(chr);
      showChars(arr);
   },1000);
}

input {
  width: 40px;
  height: 40px;
  text-align:center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7/jquery.min.js"></script>

<input type=text id="show" />
<button>show li in order every 2 seconds</button>

<ul class="menu">
  <li>A</li>
  <li>B</li>
  <li>C</li>
  <li>D</li>
  <li>E</li>
</ul>

---

Chained-Timeout обеспечивает гарантированное время свободного времени для браузера; Интервал пытается обеспечить выполнение выполняемой функции как можно ближе к запланированному времени за счет доступности пользовательского интерфейса браузера.

setTimeout или setInterval?

Answer 3

$("button").on("click",function(){
    var dispIntrvl = $(this).attr("dispIntrvl");
    if(dispIntrvl) {
         clearInterval(dispIntrvl);
    }
    var indx = -1;
    var arr = [];
    $(".menu li").each(function(){
        arr.push($(this).text());
    });
    if(arr.length == 0)return;
    var shw = $("show");
    dispIntrvl = setInterval(function() {
        shw.val(arr[++indx]);
        if(indx == arr.length)indx = -1;
    }, 2000);
    $(this).attr("dispIntrvl", dispIntrvl);
});