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

Question

<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 循环在 data-wow-delay 中添加时间？我开始创建此代码：

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

但我做错了。我会很感激你的帮助。

Answer 1

您可以使用 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>

Answer 2

你想完成你先写的HTML代码吗？
您可以使用 "loop" 之外的数字变量来做到这一点，每次只需添加 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/

Answer 3

不确定您的函数应该做什么，但您可以将递归函数与 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;
}

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

how add time value delay in js loop

javascript

time

jquery

loops

delay