如何在 JS 循环中添加时间值延迟

how add time value delay in js loop

本文关键字：添加 时间 延迟 循环 JS      更新时间：2023-09-26
<ul>
    <li class="wow fadeInRightBig" data-wow-delay="0s">element1</li>
    <li class="wow fadeInRightBig" data-wow-delay=".5s">element2</li>
    <li class="wow fadeInRightBig" data-wow-delay="1s">element3</li>
    <li class="wow fadeInRightBig" data-wow-delay="1.5s">element4</li>
    <li class="wow fadeInRightBig" data-wow-delay="2s">element5</li>
    <li class="wow fadeInRightBig" data-wow-delay="2.5s">element6</li>
    <li class="wow fadeInRightBig" data-wow-delay="3s">element7</li>
</ul>

如何使用 js 循环在数据延迟中添加时间？我开始创建以下代码：

$("ul li").attr('data-wow-delay', function(){
    var text = "";
    var number =+ 0.5;
    for (i = 0; i < 5; i+=0.5) {
        text += i + number; +"s";
    };
    return text;
});

但我做错了什么。我将感谢您的帮助。

您可以使用index()，然后乘以0.5即一个数字。

$(function() {
  $("ul li").attr('data-wow-delay', function() {
    var index = $(this).index();
    var number = 0.5;
    return (index * number) + "s";
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="wow fadeInRightBig">element1</li>
  <li class="wow fadeInRightBig">element2</li>
  <li class="wow fadeInRightBig">element3</li>
  <li class="wow fadeInRightBig">element4</li>
  <li class="wow fadeInRightBig">element5</li>
  <li class="wow fadeInRightBig">element6</li>
  <li class="wow fadeInRightBig">element7</li>
</ul>

你想完成你首先编写的HTML代码吗？
您可以使用"循环"之外的数字变量来执行此操作，并且每次只需向其添加 0.5。
您的原始代码在这里也有一个错误：text += i + number; +"s";作业中间有一个;。

var number = 0.0;
$("ul li").attr('data-wow-delay', function(){
    var text = "";
    number += 0.5;
    text += number +"s";
    console.log(text);
    return text;
});

尝试： https://jsfiddle.net/jz3b8e10/1/

不确定

你的函数应该做什么，但你可以使用递归函数和setTimeout

。 
$("ul li").attr('data-wow-delay', function(){
    var number =+ 0.5;
    var index = 0;
    addText(number, index);
});
function addText(number, index){
    text += i + number; +"s";
    if(index < 5){
        setTimeout(addText(number, index+=1), 5000)//5 seconds
    }
    return text;
}
相关文章：