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

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

  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 2

setTimeout(func, 0)不会立即执行该函数，只有在当前脚本完成后才会执行该函数，因此只有在为所有角点调用setTimeout （具有相同的延迟）后， timeout才会递增。 试试这样：

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

Answer 3

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

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