Jquery“循环”迭代
我有一个菜单结构，您可以逐步浏览，显示我用Jquery控制的其他信息和选择。 本产品本质上属于教程，其设计使用户可以按照出现的其他说明进行操作。 我已经把这个切成了单纯的骨头来说明我遇到的问题。
这里的想法是，用户可以单独进行探索，或者有一个直接进入特定菜单的按钮，但由于这是模拟物理产品上的步骤，因此我想在每次迭代中暂停菜单移动500ms。
JSFiddle在这里：http://jsfiddle.net/mLvL8twq/
控制菜单：
$("#down-button").click(function () {
keyboardDown();
});
$("#video-button").click(function () {
do {
keyboardDown();
} while ($('.selected').text() !== "Video")
});
function keyboardDown() {
var $next = $('.menu-item.selected').removeClass('selected').next('.menu-item')
if ($next.length) {
$next.addClass('selected');
} else {
$(".menu-item:first").addClass('selected');
}
}
菜单结构非常基本：
<a id="down-button" class="button">Down</a>
<a id="video-button" class="button">Video</a>
<ul id="main-menu">
<li class="menu-item selected">Test</li>
<li class="menu-item">Test</li>
<li class="menu-item">Test</li>
<li class="menu-item">Test</li>
<li class="menu-item">Test</li>
<li class="menu-item">Test</li>
<li class="menu-item">Video</li>
<li class="menu-item">Test</li>
<li class="menu-item">Test</li>
<li class="menu-item">Test</li>
<li class="menu-item">Test</li>
<li class="menu-item">Test</li>
</ul>
所以菜单正确地通过。 视频按钮应逐步通过每一步到达视频按钮。 正如所写，它立即到达那里。 用我所尝试过的方法，我无法获得一个循环来“步”到正确的位置。 我试过了：
setTimeout(function() { keyboardDown() }, 500);
这会导致页面锁定。 我尝试过使用setInterval并可以让循环步骤，但无法让任何条件语句尝试退出（无休止地步进）。
另外通过添加一个额外的类并使用dequeue删除来尝试解决方法：
$(this).addClass("pause").delay(500).queue(function(){
$(this).removeClass("pause").dequeue();
});
这完成循环，然后在循环结束后运行队列，锁定窗口，并在4秒钟后释放该窗口。
我浏览：
在jQuery中的等待/暂停/休眠迭代之间的每个循环
每个jquery - 停止循环并返回对象
jQuery循环通过具有相同类的元素
但我没有成功让每个“步骤”暂停而没有完全锁定页面。
对于稍微不同的方法的想法和建议或见解，我们将不胜感激。
JS FIDDLE
我通常这样做的方式是让函数在setTimeout中像上面的小提琴一样递归地自我激发。 然后，它可以停止任何你喜欢的条件，因为在这种情况下，下一个节点是视频。 然后你可以添加一个传入的var，让你区分2种行为，'下'和'去视频'。 我传入1来表示只是向下走1步，这会使函数在返回递归位之前返回，如下所示。
新JS：
$("#down-button").click(function () {
keyboardDown(1);
});
$("#video-button").click(function () {
keyboardDown()
});
function keyboardDown(one_step) {
var $next = $('.menu-item.selected').removeClass('selected').next('.menu-item')
if ($next.length) {
$next.addClass('selected');
} else {
$(".menu-item:first").addClass('selected');
}
if(one_step == 1){return;}
if($next.text() != 'Video'
){
setTimeout(function(){keyboardDown();},500);
}
}