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

   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 3

您可能想使用递归和某种索引。

创建一个函数，从上一张图像（或者可能只是所有图像，如果可行的话）中移除焦点，然后将cornerimgClass放在与提供给该函数的索引相匹配的图像上。然后，一旦完成，它就会使用 setTimeout 在 8 秒内再次调用自己，索引增加 1。

您需要检查何时到达列表末尾，然后停止、重置为 0 或您喜欢的任何内容。

但关键是使用命名函数的递归而不仅仅是匿名函数。

Answer 4

在您的 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));
    }
}