Jquery 从函数中按顺序显示$（）

我使用onclick运行的函数读取xml目录，并为每个目录条目打开缩略图

我想让脚本依次打开每个拇指。从逻辑上讲，我觉得它应该这样做，因为show命令位于for循环的末尾。但函数运行时，所有缩略图同时显示。我怎样才能改变这个？为什么会发生这种情况

function showproductthumbnails() {

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

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

}

}

函数showproductthumbnails（）{
对于（i=0；i
我怎样才能改变这个

您可以添加一个小的：

为什么会发生这种情况

function showproductthumbnails() {

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

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

}

}

循环速度惊人，像这样调用
show
不会阻塞。动画函数是异步的
您面临的问题是，与所有jQuery动画函数一样，是异步的。调用
show
会向队列发送指令，然后立即返回。因此，您调用e> 同时在所有元素上显示

解决方法是使用该函数。这会向效果队列添加延迟。您需要将动画延迟

300

乘以

i

——循环中的位置

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

---

这意味着第一个项目的动画将延迟

0*300

ms（0ms），第二个项目将延迟

1*300

ms（300ms），第三个项目将延迟

2*300

ms（600ms），等等。

一个技巧是将自定义事件绑定到每个缩略图。让事件运行

show（）

绑定到的缩略图的动画，然后在回调时，选择并触发绑定到

.next（）

元素的同一命名自定义事件。净效果是

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

$.show（）

仅启动动画，然后在动画运行时继续执行其他操作。在您的情况下，循环会快速启动所有动画，并将它们一起运行。有几个选项可以解决此问题：

使用

setTimeout（）

延迟每个动画的开始，如下所示：

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

---

我看到已经有了基于jQuery的答案，所以根据我的评论，这里有一个使用超时的更基本的版本：

$（文档）.ready（函数（e）{
变量imgSrc=”http://bits.wikimedia.org/skins-1.17/vector/images/search-ltr.png?301-3";
var缩略图=[]；
对于（变量i=0；i<20；i++）{
缩略图。推送（imgSrc）；
}
函数showThumbnails（缩略图，i）{
如果（i>=缩略图.长度）{
返回；
}
$（document.body）.append（$（“”）；
setTimeout（函数（）{
显示缩略图（缩略图，i+1）；
}, 100);
}
显示缩略图（缩略图，0）；
});

这里有一个不同的方法，它使用

.show（）函数的completion函数来启动下一个函数

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

函数showproductthumbnails（）{
var-cntr=0；
函数showNext（）{
if（cntr

这将执行第一次显示并设置一个完成函数，该函数将启动下一次显示，并在cntr达到限制时停止。这保证它们按顺序进行。可能是浏览器仅在脚本完成后更新UI。如果是这种情况，您可能需要设置一个显示fi的超时rst缩略图并设置显示第二个缩略图的超时，等等。超时将给浏览器一个刷新UI的机会。如果你认为这应该作为一个答案来写，我可以试一试。
$(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);
});

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