Question

我有一个菜单结构，您可以单步执行，显示我使用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秒后释放它。

我浏览了一下：

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，让你区分2个行为，'down'和'转到视频'。我传入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);    
    }
}

Jquery＆＃34; step＆＃34;迭代循环

1 个答案: