Jquery "stepped" iterations on loop

I've got a menu structure that you can step through, revealing additional information and selections that I'm controlling with Jquery. This product is tutorial in nature, and is designed so the user can step along with additional instructions that appear. I've cut this down to the bare bones to illustrate the problem I'm having.

The idea here is that the user can step through exploring on their own, or have a button that advances directly to a specific menu, but as this is simulating steps on a physical product, I'd like to pause at each iteration as the menu moves for 500ms.

JSFiddle is here: http://jsfiddle.net/mLvL8twq/

Controlling the menu:

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

The menu structure is quite basic:

<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>

So the menu steps through correctly. The video button should step through each step to get to the video button. As written, it goes there instantly. With what I've tried, I can't get a loop to "step" through to the correct spot. I've tried:

    setTimeout(function() { keyboardDown() }, 500);

which causes the page to lock. I tried using setInterval and could get the loop to step, but couldn't get it to exit (endlessly stepping) with any of the conditional statements tried.

Additionally tried a workaround by adding an extra class and removing with dequeue:

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

This completes the loop and then runs the queue after the loop finished, locking out the window, releasing it 4 seconds later.

I browsed:

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

but I've been unsuccessful getting each "step" to pause without completely locking up the page.

Thoughts and suggestions or insight on a slightly different approach are greatly appreciated.

---

JS FIDDLE

The way I usually do this is to have the function fire itself recursively in a setTimeout like in the above fiddle. Then it can just stop on whatever condition you like, as in this case the next Node being video. Then you can just add a passed in var that lets you differentiate between the 2 behaviors, 'down', and 'go to video'. I pass in 1 to signify just go down 1 step, which makes the function return before hitting the recursive bit as you'll see below.

new 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);    
    }
}

链接地址: http://www.djcxy.com/p/83530.html

上一篇: 如果使用Jquery条件，我该如何写这个？

下一篇: Jquery“循环”迭代