2013-01-18 17 views
21

जारी रखने से पहले कॉलबैक की प्रतीक्षा करें मेरे पास एक लूप है जिसके माध्यम से मैं लूपिंग कर रहा हूं।लूप

मैं एक कस्टम मोडल बनाना चाहता हूं और इसे जारी रखने से पहले प्रतिक्रिया के लिए प्रतीक्षा करना चाहता हूं।

मैं इसे कैसे प्राप्त कर सकता हूं? मुझे पता है मुझे कॉलबैक के लिए इंतजार करना है।

इस उदाहरण की तरह

:

for(var x in array){ 
      alert(x); 
      console.log(x); 
     } 

यह बिल्कुल मैं क्या करना चाहते है। लेकिन मैं तीन बटन रखना चाहता हूँ। लेकिन अलर्ट जावास्क्रिप्ट का हिस्सा नहीं है (? यह ब्राउज़र में है।)

तो, क्या आपके पास कोई विचार है?

मैं कुछ इस तरह करने के बारे में सोच रहा था:

var run = true; 
function foo(){ 
    if (run){ 
     setTimeout(foo, 500); 
    } 
} 

function stop(){ 
    run = false; 
} 

foo(); 

और फिर एक को रोकने कॉल जो पहले जारी रखने के लिए एक बटन पर क्लिक करने के लिए प्रतीक्षा करें। लेकिन क्या यह वाकई अच्छा अभ्यास है?

या कस्टम लैर्ट के पैरामीटर के रूप में एक लैम्ब्डा फ़ंक्शन का उपयोग करें और एक "ग्लोबल" चर जो उस सरणी की वर्तमान स्थिति रखता है जिसे मैं जा रहा हूं और इसे कार्यों के साथ करता हूं। पसंद करें: जांच करें कि सरणी अभी भी X. से अधिक कुंजी रखती है, फिर फ़ंक्शन दोबारा करें और प्रत्येक बार वैश्विक एक्स को बढ़ाएं।

धन्यवाद कोड के लिए खो गया स्रोत: ओह, मुझे एक विचार आया; मैं बस गुमनाम कार्य के अंदर गुमसोर्स के समाधान का उपयोग करूंगा, इसलिए मुझे वैश्विक चर नहीं मिलते हैं। अति उत्कृष्ट।

(function(){ 

})(); 
+0

क्या आप कह रहे हैं कि आप वास्तव में चेतावनी का उपयोग नहीं कर सकते क्योंकि यह पर्याप्त विकल्पों का समर्थन नहीं करता है? –

+0

कस्टम मोडल के साथ 'अलर्ट()' को प्रतिस्थापित करना संभव नहीं है और यह उसी तरह से करता है जैसे अलर्ट –

+0

'अलर्ट सिंक्रोनस बीटीडब्लू है। आप इस तरह के फ़ंक्शन निष्पादन को रोक नहीं पाएंगे - जब तक कि JS1.7 के कोरआउट/['उपज'] का उपयोग न करें (https://developer.mozilla.org/en-US/docs/JavaScript/New_in_JavaScript/1.7# जनरेटर) लेकिन यह बहुत क्रॉस-ब्राउजर नहीं है और आपको अपने स्क्रिप्ट प्रकार पर 'संस्करण' को परिभाषित करने की आवश्यकता है। आपको शायद 'i' को निष्पादन संदर्भ के अंदर संग्रहीत करना चाहिए और इसे उस फ़ंक्शन पर पास करना चाहिए जो इसके साथ एक और पुनरावृत्ति करता है जो आपके स्टाइल अलर्ट को कॉल करता है जो एक बार फिर से आपके इटेटरेटर फ़ंक्शन में वृद्धि हुई है। –

उत्तर

61

इस मान लिया जाये कि अपने सरणी

var list = ['one','two','three']; 

है आप इस पाश/कॉलबैक दृष्टिकोण

var x = 0; 
var loopArray = function(arr) { 
    customAlert(arr[x],function(){ 
     // set x to next item 
     x++; 

     // any more items in array? continue loop 
     if(x < arr.length) { 
      loopArray(arr); 
     } 
    }); 
} 

function customAlert(msg,callback) { 
    // code to show your custom alert 
    // in this case its just a console log 
    console.log(msg); 

    // do callback when ready 
    callback(); 
} 

प्रयोग आज़मा सकते हैं:

// start 'loop' 
loopArray(list); 

यहाँ JSFiddle: http://jsfiddle.net/D9AXp/

+0

हाँ, मुझे ऐसा भी एक विचार था (लैम्ब्डा फ़ंक्शन का उपयोग करने के बारे में) :) बहुत बहुत धन्यवाद। – Muqito

+3

बेहद सहायक धन्यवाद, भयानक मैंने अभी arr.lenght-1 – Bakly

+0

का उपयोग किया है, असल में, मुझे नहीं लगता कि कॉलबैक को असीमित रूप से कुछ भी करना है या नहीं। कृपया इसे देखें, मुझे यह जानना अच्छा लगेगा कि इसके लिए कोई समाधान है या नहीं, क्योंकि मैं छवि फ़ाइलों को एक-एक करके लोड करने की कोशिश कर रहा हूं जो प्रत्येक समय थोड़ा सा समय लेता है: https://jsfiddle.net/evejweinberg/tydfbop6/1/ – EJW

2

मगगीकॉल, मुझे पता है कि आपके पास जवाब है लेकिन मेरे पास एक लचीला समाधान है जो आपके लिए या शायद किसी और के लिए ब्याज हो सकता है।

समाधान jQuery (1.7+) और jQuery UI के dialog पर निर्भर करता है, लेकिन एक jQuery प्लगइन के रूप में नहीं, बल्कि ऐरे प्रोटोटाइप की एक कस्टम विधि के रूप में कार्यान्वित किया जाता है।

Array.prototype.runDialogSequence = function(dialogCallback, startIndex, endIndex){ 
    startIndex = Math.max(0, startIndex || 0); 
    endIndex = Math.min(this.length - 1, endIndex || this.length - 1); 
    var sequenceIndex = 0, 
     arr = this, 
     dfrd = $.Deferred().resolve(startIndex); 
    function makeCloseFn(seqData){ 
     return function(event, ui){ 
      if(seqData.continue_) { seqData.dfrd.resolve(seqData.arrayIndex+1, seqData); } //continue dialog sequence 
      else { seqData.dfrd.reject(seqData.arrayIndex, seqData); } //break dialog sequence 
     } 
    } 
    $.each(this, function(i){ 
     if(i < startIndex || i > endIndex) { return true; }//continue 
     dfrd = dfrd.then(function(arrayIndex){ 
      var seqData = { 
       dfrd: $.Deferred(), 
       arrayIndex: arrayIndex, 
       sequenceIndex: ++sequenceIndex, 
       length: 1 + endIndex - startIndex, 
       item: arr[arrayIndex], 
       continue_: false 
      }; 
      dialogCallback(seqData).on("dialogclose", makeCloseFn(seqData)); 
      return seqData.dfrd.promise(); 
     }); 
    }); 
    return dfrd.promise(); 
} 

Array.runDialogSequence() पर निर्भर करता है:

  • दस्तावेज़ के शरीर में एक संवाद टेम्पलेट, फिट पाठ/मूल्यों के साथ आबादी होने के लिए

    यहाँ सरणी विधि है।

  • समान वस्तुओं (आमतौर पर जावास्क्रिप्ट ऑब्जेक्ट्स) की एक सरणी जिसमें अनुक्रम में संवाद को पॉप्युलेट करने के लिए आवश्यक डेटा होता है।
  • पहले तर्क के रूप में, एक सही ढंग से निर्मित "openDialog" फ़ंक्शन गुजर रहा है।

यहां एक नमूना है "openDialog" व्याख्यात्मक टिप्पणी के साथ समारोह:

function openDialog(seqData){ 
    /* 
    seqData is an object with the following properties: 
     dfrd: A Deferred object associated with the current dialog. Normally resolved by Array.runDialogSequence() to run through the sequence or rejected to break it, but can be resolved/rejected here to force the dialog sequence to continue/break. If resolved, then pass (seqData.arrayIndex+1, seqData), or custom values. If rejected, typically pass (seqData.arrayIndex, seqData). 
     arrayIndex: The current array index. 
     sequenceIndex: The current index within the sequence. Normally the same as arrayIndex but Differs when a non-zero startIndex is specified. 
     length: The full length of the dialog sequence. 
     item: The current item from the array. 
     continue_: (false) Set to true to allow the sequence to continue. 
    */ 
    var item = seqData.item; 
    var $d = $("#d"); 
    $d.dialog({ 
     title: 'Dialog (' + seqData.sequenceIndex + ' of ' + seqData.length + ')', 
     modal: true, 
     buttons: { 
      "Continue": function(){ 
       seqData.continue_ = true;//set to true before closing to go to next dialog. 
       $(this).dialog("close"); 
      }, 
      "Cancel": function(){ 
       $(this).dialog('close');//closing with seqData.continue_ set to its default value false will break the dialog sequence. 
      } 
     } 
    }).find("#message").text(item);//Typically you will do a lot more here to populate the dialog with item data. 
    return $d;//openDialog() must return a dialog container, jQuery-wrapped. 
} 

Array.runDialogSequence() रिटर्न एक jQuery promise अनुमति जब संवाद अनुक्रम पूरा करता है (किया समारोह) कस्टम कार्रवाइयां की जा करने के लिए या मध्य में टूट गया है परिणाम (असफल समारोह)।

यहाँ नमूना कॉल के एक जोड़े हैं:

//Simplest possible 
$("#myButton1").click(function(){ 
    myArray.runDialogSequence(openDialog); 
}); 

//Call with custom startIndex and endIndex, and chanined `.then()` to provide custom actions on break/completion. 
$("#myButton2").click(function(){ 
    myArray.runDialogSequence(openDialog, 1, 3).then(function(i, seqData){ 
     alert('All dialogs complete - last item = "' + seqData.item + '"'); 
    }, function(i, seqData){ 
     alert('Dialog sequence was broken at item ' + i + ' "' + seqData.item + '"'); 
    }); 
}); 

DEMO

यह एक सामान्यीकृत समाधान के रूप में पास के रूप में मेरी कल्पना की अनुमति देता है।

+0

वह वास्तव में साफ था, मैंने आपको कम से कम एक उपरोक्त दिया :) – Muqito

+0

धन्यवाद MaggiQall, यह देखना दिलचस्प होगा कि किसी को भविष्य में यह उपयोगी लगता है या नहीं। –