jquery 显示li的文本到输入每2秒

oymdgrw7  于 2023-06-22  发布在  jQuery
关注(0)|答案(3)|浏览(122)

按下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>
1cklez4t

1cklez4t1#

您需要使用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>
u2nhd7ah

u2nhd7ah2#

$("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);
});
bvuwiixz

bvuwiixz3#

您可以使用嵌套的setTimout*(也称为Chained Timeout)* 来完成此操作,否则结果将在最后一次显示(显示只有最后一次工作的外观)。
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>

链式超时为浏览器提供了一个有保证的空闲时间; Interval尝试确保它正在运行的函数尽可能接近其计划的时间执行,以牺牲浏览器UI的可用性为代价。
setTimeout还是setInterval?

相关问题