blocks|key|1773218|text|我添加了这篇评论，但现在我已经正确地阅读了它，并回答了我自己的问题，这可能会起作用：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1773219|function+positionCards()+{
++var+$cards+=+$('#gameboard+.card');

++var+time+=+500;

++$cards.each(function()+{
++++++setTimeout(+function(){+addPositioningClass($(this));+},+time)
++++++time+%2B=+500;
++});
}|code-block|syntax|javascript|1773220|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

I added this as a comment but now that I have read it correctly and answered my own question this would probably work:

<pre><code>function positionCards() {
 var $cards = $('#gameboard .card');

 var time = 500;

 $cards.each(function() {
 setTimeout( function(){ addPositioningClass($(this)); }, time)
 time += 500;
 });
}
</code></pre>

blocks|key|1773226|text|那.delay()呢？|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1773227|或|1773228|function+addPositioningClasses($card){
++setTimeout(function()+{+$card.addClass('position')},+1000);
}|code-block|syntax|javascript|1773229|entityMap|0|LINK|mutability|MUTABLE|url|http://api.jquery.com/delay/^0|1|8|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@$A|T|B|U|1|V]]|C|$]]|$1|D|3|E|5|6|7|W|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|X|8|@]|9|@]|C|$I|J]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|C|$]]]|L|$M|$5|N|O|P|C|$Q|R]]]]

How about <a href="http://api.jquery.com/delay/" rel="nofollow">.delay()</a> ?

or 

<pre><code>function addPositioningClasses($card){
 setTimeout(function() { $card.addClass('position')}, 1000);
}
</code></pre>

blocks|key|1773258|text|如果您只针对Safari/iOS，根据控制动画序列的确切时间对您的重要性，您可能应该避免任何涉及JS超时的解决方案。不能保证动画将与超时延迟同时完成，特别是在运行速度较慢的处理器或在后台运行大量内容的机器上。webkit的更高版本(包括移动safari)允许通过@-webkit-keyframes实现定时动画序列。Webkit.org有一个nice+intro+to+it。它实际上很容易实现。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1773259|entityMap|0|LINK|mutability|MUTABLE|url|http://www.webkit.org/blog/324/css-animation-2/^0|3N|I|4R|G|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@$9|O|A|P|B|C]]|D|@$9|Q|A|R|1|S]]|E|$]]|$1|F|3|-4|5|6|7|T|8|@]|D|@]|E|$]]]|G|$H|$5|I|J|K|E|$L|M]]]]

If you're only targeting Safari/iOS, depending on how important it is to you to control the exact timing of animation sequences, you should maybe avoid any solution that involves JS timeouts. There is no guarantee that the animation will complete at the same time as the timeout delay, particularly on slow processors or machines that have lots of stuff going on in the background. Later versions of webkit (including mobile safari) do allow for timed animation sequences via <code>@-webkit-keyframes</code>. Webkit.org has a <a href="http://www.webkit.org/blog/324/css-animation-2/" rel="nofollow">nice intro to it</a>. It's actually pretty easy to implement.

blocks|key|1773322|text|试一试：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1773323|function+positionCards()+{
++$('#gameboard+.card').each(function()+{
++++++$(this).delay(500).addClass('position');
++});
}|code-block|syntax|javascript|1773324|老实说..。我曾经在某些情况下遇到过$(this).delay()的错误行为，但在其他情况下却可以完美地工作。但是，这通常与jQuery动画调用一起使用，而不是DOM属性操作。|1773325|请注意，.delay()与setTimeout的功能不同。有关详细信息，请参阅the+jQuery+.delay()+documentation。|offset|length|1773326|据我所知，$().each确实是过程化执行的，所以调用的下一次迭代应该只在前一次迭代完成后才开始。|1773327|entityMap|0|LINK|mutability|MUTABLE|url|http://api.jquery.com/delay/^0|0|0|0|13|X|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Y|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|Z|8|@]|9|@$K|10|L|11|1|12]]|A|$]]|$1|M|3|N|5|6|7|13|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|14|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V]]]]

Give this a try:

<pre><code>function positionCards() {
 $('#gameboard .card').each(function() {
 $(this).delay(500).addClass('position');
 });
}
</code></pre>

I'll be honest... I've had $(this).delay() misbehave in the past in certain instances and work flawlessly in others. However, this was normally in conjunction with jQuery animation calls, not DOM attribute manipulation. 

Please be aware .delay() does not function in the same way as setTimeout. For more information, see <a href="http://api.jquery.com/delay/" rel="nofollow">the jQuery .delay() documentation</a>.

As far as I am aware, $().each does execute procedurally so the next iteration of the call should only begin after the preceding has completed.

blocks|key|1773349|text|很抱歉挖掘了一个老帖子，但这篇技巧对类似的问题可能很有用：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1773350|$cards.each(function(index)+{
++++$(this).delay(500*index).addClass('position');
});|code-block|syntax|javascript|1773351|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Sorry for digging up an old thread, but this tip could be useful for similar issues: 

<pre><code>$cards.each(function(index) {
 $(this).delay(500*index).addClass('position');
});
</code></pre>

blocks|key|1773356|text|看看这个，对我很有效！:)|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1773357|jQuery('.optiresultsul+li').each(function(index)+{
++++jQuery(this).delay(500*index).animate({+opacity:+1+},+500,function(){
++++++++jQuery(this).addClass('bgchecked');
++++});
});|code-block|syntax|javascript|1773358|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Check this out, worked well for me! :)

<pre><code>jQuery('.optiresultsul li').each(function(index) {
 jQuery(this).delay(500*index).animate({ opacity: 1 }, 500,function(){
 jQuery(this).addClass('bgchecked');
 });
});
</code></pre>

blocks|key|1987130|text|此代码将添加将初始延迟设置为50ms。然后，对于通过".row“类的每个循环，它将增加额外的200ms延迟。这将为每一行创建一个很好的延迟显示效果。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1987131|$(+document+).ready(function()+{
++++//+set+inital+delay
++++var+dtotal+=+50;
++++$(".row").each(function()+{
++++//add+delay+to+function
++++++$(this).delay(dtotal).show();
++++//add+200ms+to+delay+for+each+loop
++++++dtotal+=+dtotal+%2B+200;
++++});
});|code-block|syntax|javascript|1987132|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

This code will add set the inital delay to 50ms. Then for each loop through the ".row" class it will add an additional 200ms delay. This will create a nice delayed show effect for each row.

<pre><code>$( document ).ready(function() {
 // set inital delay
 var dtotal = 50;
 $(".row").each(function() {
 //add delay to function
 $(this).delay(dtotal).show();
 //add 200ms to delay for each loop
 dtotal = dtotal + 200;
 });
});
</code></pre>

I'm grabbing an array of jQuery objects and then via .each() modifying each individual jquery with in the array.

In this case I'm updated the class names to trigger a -webkit-transition-property to utilize a css transition. 

I'd like there to be a pause before each css transition begins. I'm using the following, but there is no delay in between each update. Instead, they all appear to be updating at once. 

<pre><code>function positionCards() {
 $cards = $('#gameboard .card');
 $cards.each(function() {
 setTimeout( function(){ addPositioningClass($(this)); }, 500 )
 });
}

function addPositioningClasses($card){
 $card
 .addClass('position')
}
</code></pre>

I was hoping setTimeout would solve this, but it doesn't seem to be working. Is there a way to accomplish the pause before each CLASS name update of each object?

How to add pause between each iteration of jQuery .each()?

jQuery

我获取了一个jQuery对象数组，然后通过.each()修改数组中的每个单独的jquery。在本例中，我更新了类名，以触发-webkit- transition -property来利用css转换。我希望在每个css转换开始之前有一个暂停。我使用的是以下代码，但在每次更新之间没有延迟。相反，它们似乎都在一次更新。fun...

问如何在jQuery .each()的每次迭代之间添加暂停？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在jQuery .each()的每次迭代之间添加暂停？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在jQuery .each()的每次迭代之间添加暂停？
EN