按顺序$（）显示在函数内

我使用onclick函数来读取xml目录并打开每个商品的缩略图。

我希望脚本能够全面打开每个大拇指。在逻辑上我觉得它应该这样做，因为show命令在for循环的结尾。但该功能运行并且所有缩略图同时显示。我该如何改变这一点？为什么会发生？

function showproductthumbnails() { 

for (i=0;i<xmlcatalog.length;i++){ 

$(catalogitem+i).show("fold", {size:3}, 300); 

} 

}

请注意，上面的代码只是抽出肉，但问题仍然存在。

来源

2011-09-11 Tom Mlynarski

这可能是因为浏览器只会在您的脚本完成后更新UI *。如果是这种情况，您可能需要设置显示第一个缩略图的超时时间，并设置显示第二个缩略图等的超时时间。超时将使浏览器有机会刷新UI。如果你认为这应该写成答案，我可以放弃它。 –

我该如何改变这种情况？

您可以添加一个小delay^[docs]：

$(catalogitem+i).delay(i*100).show("fold", {size:3}, 300);

为什么会出现这种情况？

该循环速度惊人，并呼吁show这样不会阻塞。动画功能是异步。

来源

2011-09-11 22:12:36

完美的作品。周到的工作。 –

你面临的问题是show - 就像所有的jQuery动画函数 - 是异步的。调用show将指令发送到队列，然后立即返回。因此您可以同时在所有元素上调用show。

这种方式是使用delay函数。这给效果队列增加了一个延迟。您需要延迟动画300乘以i - 循环中的位置。

$(catalogitem+i).delay(i * 300).show("fold", {size:3}, 300);

这意味着第一项将具有其动画由0 * 300 MS（0毫秒），则通过第二MS 1 * 300（300毫秒），则通过第三2 * 300毫秒（600毫秒）等

来源

2011-09-11 22:13:33 lonesomeday

一个延迟技巧是将自定义事件绑定到每个缩略图。让事件为绑定的缩略图运行show()动画，然后在回调中选择并触发绑定到.next()元素的同名命名自定义事件。最终效果是动画的级联，每个动画都会调用下一个动画，直到达到最后一个缩略图。

事情是这样的：

$('.thumbnail').bind('showme', function(){ // for each thumbnail, bind 'showme' 
    $(this).show([your_options], function(){ // thumbnail shows itself 
    $(this) // starting here... 
    .nextAll('.thumbnail:first') // ...select the next thumbnail 
    .trigger('showme'); // ...and trigger the same, recursion-style 
    }); 
}) 
.first() // then, at the first thumbnail... 
.trigger('showme'); // ...start the dominoes falling

来源

2011-09-11 22:16:41

$.show()仅仅启动动画，然后将动画运行时移动到其他的事情。在你的情况下，循环快速启动所有动画，并且它们都一起运行。有几个选项来解决这个问题：

使用setTimeout()延迟每个动画的开始，像这样：

var animationTime = 300; 
for (i=0;i<xmlcatalog.length;i++){ 
    setTimeout(function() { $(catalogitem+i).show("fold", {size:3}, animationTime); }, animationTime*i; 
}

第一次通过，延迟将是0毫秒，第二个将是300毫秒，第三个将是600ms等等。

如果你不想操心计算时代，每个动画应该开始，你可以使用可选的callback参数$.show()，这触发一次在动画完成：

function showThumb(i) { // recursively calls each item after the current one is done 
    if (i>=xmlcatalog.length) 
     return; 
    else 
     $(catalogitem+i).show(300, function() { showThumb(i+1); }); 
} 
function showproductthumbnails() { 
    showThumb(0); 
}

来源

2011-09-11 22:17:14 maackle

我看到有已经基于jQuery的答案，所以这里是一个使用超时按我的意见更基本的版本：

http://jsfiddle.net/n6A9B/1/

$(document).ready(function (e) { 
    var imgSrc = "http://bits.wikimedia.org/skins-1.17/vector/images/search-ltr.png?301-3"; 
    var thumbnails = []; 
    for (var i = 0; i < 20; i++) { 
     thumbnails.push(imgSrc); 
    } 

    function showThumbnails(thumbnails, i) { 
     if (i >= thumbnails.length) { 
      return; 
     } 
     $(document.body).append($("<img src=" + thumbnails[i] + "/>")); 
     setTimeout(function() { 
      showThumbnails(thumbnails, i+1); 
     }, 100); 
    } 

    showThumbnails(thumbnails, 0); 
});

来源

2011-09-11 22:17:26

下面是使用.show()函数的完成函数启动下一个函数的另一种方法。

function showproductthumbnails() { 
    var cntr = 0; 
    function showNext() { 
     if (cntr < xmlcatalog.length) { 
      $(catalogitem+cntr).show(300, "fold", showNext); 
      ++cntr; 
     } 
    } 
    showNext(); 
}

这样做的第一个节目，并设置完成功能，将启动下一个，它会停止时，cntr达到极限。这保证他们顺序地跟随彼此。

来源

2011-09-11 22:26:32 jfriend00

按顺序$（）显示在函数内

回答

相关问题