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

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

创建一个从前一个图像中移除焦点的函数（或者可能只是所有图像，如果这样可以工作），然后将cornerimgClass放在与提供给函数的索引匹配的那个上。然后，一旦完成，它使用setTimeout在8秒内调用自身agin，索引增加1。

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

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

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

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

JQuery每个函数在非函数之间暂停

4 个答案: