Jquery在循环上“步进”迭代

Question

我有一个菜单结构，您可以单步执行它，显示我使用 Jquery 控制的其他信息和选择。该产品本质上是教程，其设计目的是让用户可以按照出现的其他说明进行操作。为了说明我遇到的问题，我已经把它简化了。

这里的想法是用户可以自己逐步探索，或者有一个按钮直接进入特定菜单，但由于这是模拟物理产品的步骤，我想在每次迭代时暂停随着菜单移动 500 毫秒。

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秒后释放。

我浏览过：

Wait/Pause/Sleep in jQuery Each Loop between Iterations

Jquery each - Stop loop and return object

jQuery to loop through elements with the same class

但我没有成功让每个“步骤”暂停而没有完全锁定页面。

非常感谢您对稍微不同的方法提出的想法和建议或见解。

Answer 1

JS FIDDLE

我通常这样做的方式是让函数在 setTimeout 中递归地触发自身，就像上面的小提琴一样。然后它可以在你喜欢的任何条件下停止，在这种情况下，下一个节点是视频。然后，您可以添加一个传入的 var，让您区分两种行为，“向下”和“转到视频”。我传入 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);    
    }
}