使用的setTimeout要延迟jQuery的动画 [英] Using setTimeout To Delay A jQuery Animation

问题描述

我图像工作的一些出过渡，当用户presses按钮移动到下一个图像。当存在多个图像彼此相邻是非常窄的，这些图像将在同一时间全部过渡。所以，我检查图像的宽度和薄的添加到阵列中，然后运行数组中的每个对象上的转变。我想在阵列中创建的每个图像的动画之间的一个小的延迟，所以我想1秒超时后运行我jQuery.animate。

下面是我试图让超时没有成功的工作方式：

1

 为（i = 0; I＆LT; set.length;我++）{
    如果（ⅰ！= 0）{
    的setTimeout（函数（）{设定[I] .transitionOut（$（'＃画廊'），562）}，100）;
    }其他{
    设置[I] .transitionOut（$（'＃画廊'），562）;
    }
}
 

2

 为（i = 0; I＆LT; set.length;我++）{
    如果（ⅰ！= 0）{
    功能tempTransition（）{
    设置[I] .transitionOut（$（'＃画廊'），562）;
    }
    的setTimeout（tempTransition，100）;
    }其他{
    设置[I] .transitionOut（$（'＃画廊'），562）;
    }
}
 

3。

 为（i = 0; I＆LT; set.length;我++）{
    如果（ⅰ！= 0）{
    的setTimeout（'功能（）{设定[I] .transitionOut（$（＃长廊），562）}'，100）;
    }其他{
    设置[I] .transitionOut（$（'＃画廊'），562）;
    }
}
 

transitionOut（）：

  jQuery.fn.transitionOut =功能（父母，高度）{
    this.animate（{
    高度：'0'，
    顶部：身高+'像素'
    }，函数（）{
    $（这）一个.remove（）;
    }）;
}
 

我得到它的工作使用CMS的闭合例子。但是，现在我遇到了一个新问题。过渡只与第二图像发生。当有三幅图像就会去动画形象1，延迟，动画的图像2，动画图像3.有2和3之间没有延迟。

下面是新的code：

 为（i = 0; I＆LT; set.length;我++）{
    （函数（ⅰ）{
    如果（ⅰ！= 0）{    功能tempTransition（）{
    设置[I] .transitionOut（$（'＃画廊'），562）;
    }
    的setTimeout（tempTransition，200）;
    }其他{
    设置[I] .transitionOut（$（'＃画廊'），562）;
    }
    }）（一世）;
}
 

解决方案

通过查看code我觉得你的又一封问题，也许是最常见的问题，当人们用循环和嵌套函数工作，我已经看到了。

的 I 变量，你的的setTimeout 回调函数参考，是一样的（ ，因为JavaScript只有函数范围，而不是块范围的），以及这些功能是异步执行的时间，循环已完成，的和 I 变量将包含 set.length - 1 适用于所有情况，其中的setTimeout 是用了。

像往常一样，尝试捕捉使用另一封我变量：

 为（VAR I = 0; I＆LT; set.length;我++）{
  （函数（ⅰ）{
    如果（ⅰ！= 0）{
        的setTimeout（函数（）{设定[I] .transitionOut（$（'＃画廊'），562）}，100）;
    }其他{
        设置[I] .transitionOut（$（'＃画廊'），562）;
    }
  }）（一世）;
}
 

I'm working on some out transitions on image when a user presses the button to move to the next image. When there are multiple images next to each other that are very narrow, those images will all transition at the same time. So I check the width on the images and add the thin ones to an array and then run the transition on each object in the array. I wanted to create a little delay between the animation of each image in the array so I'm trying to run my jQuery.animate after a 1 second timeout.

Here's the ways I've tried to get the timeout working without success:

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();
    });
}

I got it working using CMS's closure example. But, now I'm running into a new problem. The transition only happens with the second image. When there is three images it will go animate image 1, delay, animate image 2, animate image 3. There's no delay between 2 and 3.

Here's the new code:

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);
}

解决方案

By looking at your code I think you have yet another closure problem, perhaps the most common problem I've seen when people work with loops and nested functions.

The i variable which your setTimeout callback function refer, is the same (because JavaScript has only function-scope, not block-scope), and by the time those functions are executed asynchronously, the loop have already finished, and the i variable will contain set.length - 1 for all cases where setTimeout is used.

As usual, try to capture the i variable using another closure:

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);
}

这篇关于使用的setTimeout要延迟jQuery的动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！