JQuery के प्रत्येक पुनरावृत्ति के बीच विराम कैसे जोड़ें?

Question 1

मैं jQuery वस्तुओं की एक सरणी ले रहा हूँ और फिर .each () के साथ सरणी में प्रत्येक व्यक्ति jquery को संशोधित कर रहा हूं।

इस मामले में, मैं एक वर्ग संक्रमण का उपयोग करने के लिए एक -webkit- संक्रमण-संपत्ति को ट्रिगर करने के लिए वर्ग के नाम अद्यतन किया जाता है।

मैं चाहता हूं कि प्रत्येक सीएसएस संक्रमण शुरू होने से पहले एक ठहराव हो। मैं निम्नलिखित का उपयोग कर रहा हूं, लेकिन प्रत्येक अपडेट के बीच में कोई देरी नहीं है। इसके बजाय, वे सभी एक ही बार में अपडेट होते दिखाई देते हैं।

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

function addPositioningClasses($card){
  $card
    .addClass('position')
}

मैं उम्मीद कर रहा था कि setTimeout इसे हल करेगा, लेकिन यह काम नहीं कर रहा है। क्या प्रत्येक ऑब्जेक्ट के प्रत्येक CLASS नाम अपडेट से पहले ठहराव को पूरा करने का एक तरीका है?

Question 2

मैंने इसे एक टिप्पणी के रूप में जोड़ा है लेकिन अब जब मैंने इसे सही ढंग से पढ़ा है और अपने स्वयं के प्रश्न का उत्तर दिया है तो यह शायद काम करेगा:

function positionCards() {
  var $cards = $('#gameboard .card');

  var time = 500;

  $cards.each(function() {
      setTimeout( function(){ addPositioningClass($(this)); }, time)
      time += 500;
  });
}

Question 3

एक पुराने धागे को खोदने के लिए क्षमा करें, लेकिन यह टिप समान मुद्दों के लिए उपयोगी हो सकती है:

$cards.each(function(index) {
    $(this).delay(500*index).addClass('position');
});

Question 4

यदि आप एक विधि बनाते हैं जो हर 500 एमएस को कॉल करता है जो उस चाल को करना चाहिए। निम्नलिखित कोड काम करना चाहिए।

var __OBJECTS = [];

$('#gameboard .card').each(function() {
    __OBJECTS.push($(this));
});

addPositioningClasses();

function addPositioningClasses() {
    var $card = __OBJECTS.pop();
    $card.addClass('position');
    if (__OBJECTS.length) {
        setTimeout(addPositioningClasses, 500)
    }
}

फिडल पर परीक्षण किया गया: http://jsfiddle.net/jomanlk/haGfU/

Question 5

कैसे के बारे में .delay () ?

या

function addPositioningClasses($card){
  setTimeout(function() { $card.addClass('position')}, 1000);
}

Question 6

यदि आप केवल सफारी / iOS को लक्षित कर रहे हैं, तो यह निर्भर करता है कि एनीमेशन अनुक्रमों के सटीक समय को नियंत्रित करने के लिए आपके लिए कितना महत्वपूर्ण है, आपको शायद किसी भी समाधान से बचना चाहिए जिसमें JS टाइमआउट शामिल हैं। इस बात की कोई गारंटी नहीं है कि एनीमेशन समयबाह्य देरी के रूप में एक ही समय में पूरा होगा, विशेष रूप से धीमे प्रोसेसर या मशीनों पर जो पृष्ठभूमि में बहुत सारे सामान चल रहे हैं। वेबकिट के बाद के संस्करणों (मोबाइल सफारी सहित) के माध्यम से समयबद्ध एनीमेशन दृश्यों के लिए अनुमति देते हैं @-webkit-keyframes। Webkit.org के पास एक अच्छा परिचय है । यह वास्तव में लागू करने के लिए बहुत आसान है।

Question 7

इसे आजमाइए:

function positionCards() {
  $('#gameboard .card').each(function() {
      $(this).delay(500).addClass('position');
  });
}

मैं ईमानदार रहूंगा ... मेरे पास $ (यह) है। (कुछ) अतीत में कुछ मामलों में दुर्व्यवहार किया गया है और दूसरों में दोषरहित काम किया है। हालांकि, यह सामान्य रूप से jQuery एनीमेशन कॉल के साथ संयोजन में था, DOM विशेषता हेरफेर नहीं।

कृपया अवगत रहें .delay () setTimeout के समान कार्य नहीं करता है। अधिक जानकारी के लिए, jQuery .delay () प्रलेखन देखें ।

जहां तक मुझे जानकारी है, $ () प्रत्येक प्रक्रियात्मक रूप से निष्पादित करता है इसलिए कॉल का अगला पुनरावृत्ति पूर्ववर्ती पूरा होने के बाद ही शुरू होना चाहिए।

Question 8

इस की जाँच करें, मेरे लिए अच्छी तरह से काम किया! :)

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

Question 9

यह कोड 50 मिनट के लिए इनबिल्ट विलंब सेट करेगा। फिर ".row" वर्ग के माध्यम से प्रत्येक लूप के लिए यह अतिरिक्त 200ms देरी जोड़ देगा। यह प्रत्येक पंक्ति के लिए एक अच्छा विलंबित शो प्रभाव पैदा करेगा।

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