2012-06-01 9 views
7

एचटीएमएल:jQuery। कुछ के लिए कॉलबैक फ़ंक्शन का उपयोग करने से अलग कतार() अलग कैसे किया जाता है?

<span>hello world!</span> 

js: (कॉलबैक का उपयोग कर)

$('span').click(function() { 
    $(this).animate({ 
    fontSize: '+=10px' 
    }, 'slow', function() { 
    // callback after fontsize increased 
    $(this).text( $(this).text() + ' rolled! '); 
    }); 
}); 

तो है कि हर बार SPAN क्लिक करें, पाठ है 'लुढ़का' के बाद फ़ॉन्ट आकार, वृद्धि हुई बजाय एक साथ हो रहा से जुड़ा होना चाहिए।

और यह कतार (का उपयोग करके किया जा सकता है) के साथ-साथ इस तरह:

js: (कतार का उपयोग कर())

$('span').click(function() { 
    $(this).animate({ 
    fontSize: '+=10px' 
    }, 'slow'}) 
    .queue(function() { 
    $(this).text( $(this).text() + ' rolled! '); 
    }); 
}); 

मुझे यकीन है कि क्या उन दोनों के बीच अंतर यह है नहीं कर रहा हूँ। दोनों एक ही काम करते हैं।

कॉलबैक का उपयोग करने से कतार() बेहतर/पसंद क्यों है (या क्यों नहीं)? कतार() के बारे में विशेष क्या है?

धन्यवाद।

+1

जाँच इस सूत्र - जवाब देने के लिए http://stackoverflow.com/questions/1058158/can-somebody-explain-jquery-queue-to-me –

उत्तर

1

आप एक ही कतार में अधिक घटनाओं (जिससे आप अपने कोड में और specifie) डाल सकते हैं के रूप में अपने एनीमेशन में डाल दिया है।

तो कॉलबैक के बाद अपने एनीमेशन तैयार है, लेकिन के मामले में तुरंत निष्पादित किया जाएगा कतार का उपयोग करके() कतार में अन्य घटनाएं हो सकती हैं जिन्हें पहले निष्पादित किया जाएगा।

इस व्यवहार का लाभ यह है कि एक समवर्ती घटनाएं (स्लाइड अप और उदाहरण के लिए स्लाइड डाउन) एक ही समय में निष्पादित की जाएगी, जो अजीब चीजें प्रदान करेगी।

उदाहरण:

$('div').click(function() { 
    $(this).animate({ 
    color: 'green' 
    }, 'slow'}) 
    .queue(function() { 
    $(this).text(' got colored! '); 
    }); 
}); 

$('span').click(function() { 
    $(this).animate({ 
    fontSize: '+=10px' 
    }, 'slow'}) 
    .queue(function() { 
    $(this).text( ' got bigger! '); 
    }); 
}); 

आप पहली div और क्लिक करते हैं तो तुरंत बाद काल, अब आप यह सुनिश्चित करें कि div की कतार पहले निष्पादित किया जाएगा, और हो सकता है कि कि इसके तैयार होते ही, कतार अवधि का निष्पादन किया जाएगा।

कॉलबैक के मामले में, पहले तैयार होने वाली एनीमेशन से संबंधित एक को पहले निष्पादित किया जाएगा। और यदि वे एक ही समय में तैयार होंगे, तो दोनों एक ही समय में निष्पादित किए जाएंगे। जिसके परिणामस्वरूप, इस मामले में, 'रंगीन हो गया' नहीं देखेगा! पाठ या 'बड़ा हो गया!' पाठ।

+0

धन्यवाद, लेकिन समझने में मुश्किल है, क्या आपके पास एक उदाहरण है? – gilzero

+0

@gilzero: जोड़ा गया उदाहरण – iddo

+1

@tangelo मुझे यह जवाब बिल्कुल समझ में नहीं आता है। उदाहरण आपके विवरण से मेल नहीं खाता है। क्या आप समझा सकते हैं कि "div" एनीमेशन "अवधि" एनीमेशन से कैसे संबंधित है? –

0

callback पैरामीटर का उपयोग .queue(callback) विधि का उपयोग करने जैसा बिल्कुल है।
जब आप किसी भी एनीमेशन में callback की आपूर्ति करते हैं, तो यह केवल .queue जैसा कॉलबैक कतार देता है।

.queue(callback) आपकी एनीमेशन से अलग कॉलबैक जोड़ने का एक और तरीका है।
वहाँ ऐसा करने के लिए पूरी तरह से वैध कारण है:

$(this).animate(...); 
if (shouldDoCallback) { 
    $(this).queue(...); 
} 
संबंधित मुद्दे

 संबंधित मुद्दे