CODEWITHSUNDEEP
javascriptjquery
ezero
ezero

Reputation: 1310

Exit jQuery loop

This jQuery code loops through rows in a table and highlights each row as it goes. I have a stop button that sets a variable to false.

I know that I can break out of the .each loop by using return false;, but I want it to break out from within the queue.

How can I do this if the var is false?

$('.js-channel-notes tr').each(function(i) {
    $(this).delay((i++) * 160).queue(function() {
        $('.channel-row-highlight').removeClass('channel-row-highlight');
        $(this).addClass('channel-row-highlight').clearQueue();
    });
});

Upvotes: 0

Views: 366

Answers (2)

user1106925
user1106925

Reputation:

Don't use .each() or .queue(). Just make a function that operates on the current element and delays the execution of the next call to the same function.

The current element is determined by an i counter that you increment on each call.

To break it, have a flag that is checked to exit the function immediately.

var tr = $('.js-channel-notes tr');
var i = 0;
var halt;

function next() {
    if (halt) return;

    $('.channel-row-highlight').removeClass('channel-row-highlight');
    tr.eq(i).addClass('channel-row-highlight');
    i++;
    if (i < tr.length) {
        setTimeout(next, 160);
    }
}

next();

Or skip jQuery altogether since there's so little being used there anyway.

var tr = document.querySelectorAll('.js-channel-notes tr');
var i = 0;
var halt;

function next() {
    if (halt) return;

    var c = document.querySelector('.channel-row-highlight');
    if (c) c.classList.remove('channel-row-highlight');
    tr[i].classList.add('channel-row-highlight');
    i++;
    if (i < tr.length) {
        setTimeout(next, 160);
    }
}

next();

There's far more engineering than is needed by using .delay() and .queue(). Simpler is better.

Upvotes: 1

xtofl
xtofl

Reputation: 41519

Apparently, you don't want an each.

You want a continuation, that you can 'conditionally' continue. Basically something like this (but unchecked, unrun):

var continuation = function(todo) {
    if (!todo.length) return;
    var head = todo[0];
    var tail = todo.slice(1); // or what is it
    head.delay(...).queue(function(){
         if (somecondition)
             continuation(tail);
    });
};
continuation($('.js-channel-notes tr'));

Upvotes: 0

Related Questions