Question

所有Imtrying要做的是有一个循环迭代我的导航元素，并且每秒检查数据时间到被计数的变量，并更改div以使列表项中的文本。我已经按顺序增加了列表，因此不会成为问题。

我已经尝试了40种不同的方法来实现这一点，这是我对工作解决方案的追求，它只是将div的innerHTML设置为空白，我现在不知道为什么。

<DOCTYPE! Html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(document).ready(function(){       
var navList = document.getElementsByClassName("nav");
var y = 0;
for(x = 0; x< 50; x++){
    var timeCheck = navList[y].getAttribute("data-time");
    setTimeout(function(){
        if (timeCheck == x){
            document.getElementById('itemHtml').innerHTML = navList[y].innerHTML;
            y++;
            }
        },1000);
    }
}); 
</script>
</head>
<body>
<ul>
    <li class="nav" data-time="4"> test 1</li>
    <li class="nav" data-time="8"> test 2</li>
    <li class="nav" data-time="14"> test 3</li>
    <li class="nav" data-time="18"> test 4</li>
</ul>
<div>
<h3 id="itemHtml"> placeholder </h3>
<h3 id="test"> placeholder </h3>
</div>

</body>
</html>

Answer 1

当你的setTimeout执行时，for循环很可能已经遍历了所有元素。它还会创建一个闭包，因此x值将不是您所期望的。最后但同样重要的是，setTimeout在指定时间后执行一次，您希望使用setInterval。

Answer 2

那么你要做的就是每时候检查一下，如果时间已经超过任何元素的日期时间？如果是这样，请使用间隔而不是设置超时。在每次执行间隔时都有循环。

var navList = document.getElementsByClassName("nav");
var y = 0;

var timeCount = 0;
setInterval(function(){ // Create an interval with a function payload.
    timeCount++; // Increment the times hit. This is an an approx of number of seconds
    for(x = 0; x< navList.length; x++){
      var timeCheck = navList[y].getAttribute("data-time");
        console.log('timeCheck: ' + timeCheck + ' timeCount ' + timeCount);
        if(timeCheck == timeCount){ // Have we found a match for this current second?
            console.log('found a match');
            console.log(navList[y].innerHTML);
             document.getElementById('itemHtml').innerHTML = navList[y].innerHTML;
            y++;
        }
    }
}, 1000); // run interval every second.

http://jsfiddle.net/3pop4g76/4/

Answer 3

我最终用于那些感兴趣的人。

<DOCTYPE! Html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(document).ready(function(){       
var navList = document.getElementsByClassName("nav");
var y = 0;
var x = 0;
var test = setInterval(function(){
        x++;
        var timeCheck = navList[y].getAttribute("data-time");
        if (timeCheck == x){
            document.getElementById('itemHtml').innerHTML = navList[y].innerHTML;
            y++;
            }
        if(x == 10){clearInterval(test)}
        },1000);
}); 
</script>
</head>
<body>
<ul>
    <li class="nav" data-time="4"> test 1</li>
    <li class="nav" data-time="8"> test 2</li>
    <li class="nav" data-time="14"> test 3</li>
    <li class="nav" data-time="18"> test 4</li>
</ul>
<div>
<h3 id="itemHtml"> placeholder </h3>
<h3 id="test"> placeholder </h3>
</div>

</body>
</html>

延迟循环功能无法正常工作

3 个答案: