Question

当用户按下按钮移动到下一张图像时，我正在处理图像上的一些转换。当彼此相邻的多个图像非常窄时，这些图像将同时转换。因此，我检查图像上的宽度，并将精简的数据添加到数组中，然后对数组中的每个对象运行转换。我想在数组中每个图像的动画之间创建一点延迟，所以我试图在1秒超时后运行我的jQuery.animate。

以下是我试图让超时工作失败的方法：

1

for (i=0; i < set.length; i++) {
    if (i != 0) {
        setTimeout(function() { set[i].transitionOut($('#gallery'), 562) }, 100);
    } else {
        set[i].transitionOut( $('#gallery'), 562 );
    }
}

2

for (i=0; i < set.length; i++) {
    if (i != 0) {
        function tempTransition() {
            set[i].transitionOut( $('#gallery'), 562 );
        }
        setTimeout(tempTransition, 100);
    } else {
        set[i].transitionOut( $('#gallery'), 562 );
    }
}

3

for (i=0; i < set.length; i++) {
    if (i != 0) {
        setTimeout('function() { set[i].transitionOut($("#gallery"), 562) }', 100);
    } else {
        set[i].transitionOut( $('#gallery'), 562 );
    }
}

transitionOut（）：

jQuery.fn.transitionOut = function(parent, height) {
    this.animate({
        height: '0',
        top: height + 'px'
    }, function() {
        $(this).remove();
    });
}

我使用CMS的闭包示例了解它。但是，现在我遇到了一个新问题。转换仅发生在第二个图像上。当有三个图像时，它将动画图像1，延迟，动画图像2，动画图像3.在2和3之间没有延迟。

这是新代码：

for (i=0; i < set.length; i++) {
    (function(i) {
        if (i != 0) {

            function tempTransition() {
                set[i].transitionOut( $('#gallery'), 562 );
            }
            setTimeout(tempTransition, 200);
        } else {
            set[i].transitionOut( $('#gallery'), 562 );
        }
    })(i);
}

Answer 1

通过查看您的代码，我认为您有yet another closure problem，这可能是人们使用循环和嵌套函数时遇到的最常见的问题。

i回调函数引用的setTimeout变量，是相同的（，因为JavaScript只有函数作用域，而不是块作用域），当这些函数异步执行时，循环已经完成，，i变量将包含set.length - 1用于setTimeout的所有情况使用。

像往常一样，尝试使用另一个闭包来捕获i变量：

for (var i=0; i < set.length; i++) {
  (function (i) {
    if (i != 0) {
        setTimeout(function() { set[i].transitionOut($('#gallery'), 562) }, 100);
    } else {
        set[i].transitionOut( $('#gallery'), 562 );
    }
  })(i);
}

Answer 2

在定时动画/效果方面，使用超时是一件很奇怪的事情。

我没有测试你的代码，但是通过浏览它，我注意到你正在使用setTimeout而没有任何东西可以清除它们。

当用户在“延迟”期间触发事件时会发生什么？你必须实现一些东西来管理它。

抱歉，我现在没有给你答案，也许是因为我有更多的时间或有人提出更优雅的解决方案。

Answer 3

jquery fadeOut http://docs.jquery.com/Effects/fadeOut允许您创建一个回调，这是一个可以在fadeOut完成时运行的函数。因此，如果你想要你可以将衰落链接在一起，所以当一个完成时它会调用下一个。如果那不是你想要的，我可能会误读你的问题。

此外，在示例3中，我认为您希望像这样编写它，并且没有将函数定义传递给setTimeout，因为它不会执行任何操作。

setTimeout('set[i].transitionOut($("#gallery"), 562)', 100);

使用setTimeout延迟jQuery动画

3 个答案: