JQuery каждая функция пауза между не функциональными

Question

Эта функция JQuery должна тайм-аут, чтобы гарантировать, что каждый элемент задерживается через 8 секунд после последнего.Таким образом создавая галерею, где изображения постепенно исчезают на 8 секунд друг от друга.

Это не работает.

Любые идеи.

function gallery() {
    var timeout = 0;
    $('.cornerimg').each(function() {
        setTimeout(function() {
            $(this).addClass('cornerimgfocus');
            setTimeout(function() {
                $(this).removeClass('cornerimgfocus');
                timeout += 8000;
            }, (timeout + 8000));
        },timeout); 
    });
}

Чудесный

Answer 1

setTimeout(func, 0) не сразу выполняет функцию, только после завершения текущего скрипта, поэтому timeout увеличивается только после вызова setTimeout для всех углов (с одинаковой задержкой).Попробуйте это так:

function gallery() {
    var timeout = 0;
    $('.cornerimg').each(function() {
        setTimeout(function() {
            $(this).addClass('cornerimgfocus');
            setTimeout(function() {
                $(this).removeClass('cornerimgfocus');
            }, 8000);
        },timeout);
    timeout += 8000;
    });
}

Answer 2

В ваших вызовах setTimeout 'this' не равно элементу, который вы думаете, это равно DOMWindow. Попробуйте эту версию вместо этого, поскольку я нашел, что это было проще.

function gallery() {
    var imgs = $('.cornerimg.');
    var timer = 8000; // default starting time


    var fade = function(element) {
        setTimeout(function() {
            element.addClass('cornerimgfocus');
        }, timer);

        timer += 8000;

        setTimeout(function() {
            element.removeClass('cornerimgfocus');
        }, timer);
    };

    for (var i = 0; i < imgs.length; i += 1) {
        fade(imgs.eq(i));
    }
}

Answer 3

   var $images = $( '.cornerimg' );
    var current_image = 0;

    function gallery() {

        $images[ current_image ].addClass( 'cornerimgfocus' );

        setTimeout( function() {

            $images[ current_image ].removeClass( 'cornerimgfocus' );

            current_image += 1;

            if ( current_image > $images.length - 1 ) {
                current_image = 0;
            }

            // remove this if you don't need additional timeout
            setTimeout( gallery, 8000 );

        }, 8000);

}

Answer 4

Возможно, вы захотите использовать рекурсию и какой-нибудь индекс.

Создайте функцию, которая удаляет фокус с предыдущего изображения (или, возможно, только все изображения, если это будет работать), а затем помещает cornerimgClassтот, который соответствует индексу, предоставленному функции.Затем, как только это будет сделано, он использует setTimeout для вызова самого agin за 8 секунд с индексом, увеличенным на единицу.

Вы захотите выполнить проверку, когда достигнете конца списка и либо остановитесь, либо перезагрузитев 0 или что вы хотите.

Ключевым моментом является использование рекурсии с именованными функциями, а не только с анонимными функциями.