Javascript Jquery"；“阶梯式”；循环迭代

我有一个菜单结构，您可以逐步查看，显示我用Jquery控制的其他信息和选择。本产品本质上是教程，其设计目的是让用户能够按照出现的其他说明进行操作。我已经把这一点简明扼要地说明了我遇到的问题

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

JSFIDLE在这里：

控制菜单：

$("#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>

这会导致页面锁定。我尝试使用

setInterval

，可以使循环进入步骤，但无法使用任何尝试过的条件语句使其退出（无休止的步骤）

另外，还尝试了一种解决方法，添加了一个额外的类，并使用“出列”进行了删除：

    $(this).addClass("pause").delay(500).queue(function(){
        $(this).removeClass("pause").dequeue();
    });

这将完成循环，然后在循环完成后运行队列，锁定窗口，4秒钟后释放它

我浏览：

但是我没有成功地让每一个“步骤”在没有完全锁定页面的情况下暂停

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

我通常这样做的方式是让函数在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);    
    }
}

---

在你编辑之前我就在想，这可能是一个很好的解决方法。有没有这样的方法：

keyboardDown（“视频”）

然后

if（$next.text（）！=passed\u var

，这样我就可以传递其他菜单项，比如

keyboardDown（“音频”）

。尝试修改您的小提琴，但未成功。类似这样的操作：但显然不起作用。啊，是的，编辑时我最初没有注意到单个步骤。最后要做的是阻止视频按钮在其已运行时被单击。您可以通过添加一个全局状态变量来完成此操作，您可以选中that使keyBoardDown函数在其设置时返回，并在最后一个if上作为else的一部分被取消设置。@AndrewClody这将起作用，您有2个视频单击处理程序，请参阅我的小提琴：这超出了我的要求，已接受。感谢您的帮助。

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