दिलचस्प पोस्ट
क्या आईटरो के प्रदर्शन के मुद्दे हैं? लिनक्स में एक फाइल को सिमलिंक कैसे करें? जावास्क्रिप्ट में एक परिभाषित चर की जांच कैसे करें चेतावनी: push.default अनसेट है; इसका निहित मूल्य गीट 2.0 में बदल रहा है विंडोज कुंजी पर गिट बैश का उपयोग करते समय निजी कुंजी को डिक्रिप्ट करने के लिए पासवर्ड हर बार दर्ज किया जाना चाहिए? PHP में वास्तविक समय आउटपुट के साथ चलाना प्रक्रिया चारों का डिफ़ॉल्ट मान क्या है? MySQL – एक क्वेरी में विभिन्न मानों के साथ कई पंक्तियों को अपडेट करें मैक के लिए ओरेकल के नए 1.7 जेडीके का उपयोग कर मैं ईक्लीपस कैसे चलाऊँ? जावा केस-संवेदनशील है? अहस्ताक्षरित पूर्णांक ओवरफ़्लो परिभाषित व्यवहार क्यों नहीं है, पर हस्ताक्षर किए पूर्णांक अतिप्रवाह है? ":" (बृहदान्त्र) सी स्ट्रेट में – इसका क्या अर्थ है? मुझे एक क्लास में "यह" कब उपयोग करना चाहिए? जब काम कम करते हैं तो हडोप में शुरू होता है? HTML5 ऑडियो स्टॉप फ़ंक्शन

jQuery – थ्रेड / अतुल्यकालिक किया जा सकता है?

मैं वर्तमान में Django फ़्रेमवर्क के साथ AJAX का उपयोग कर रहा हूं।

मैं asynchronous पोस्ट / जीएमजी को पास कर सकता हूं, और इसे एक json ऑब्जेक्ट वापस कर सकता हूं।

फिर Django से पारित परिणाम के अनुसार, मैं डेटा के माध्यम से लूप लूंगा और वेबपेज पर एक टेबल अपडेट करूँगा।

तालिका के लिए HTML:

 <!-- Modal for Variable Search--> <div class="modal fade" id="variableSearch" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button> <h4 class="modal-title" id="myModalLabel">Variable Name Search</h4> </div> <div class="modal-body"> <table id="variableSearchTable" class="display" cellspacing="0" width="100%"> <thead> <tr> <th> Variable Name </th> </tr> </thead> </table> <p> <div class="progress"> <div class="progress-bar progress-bar-striped active" id="variableSearchProgressBar" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%"> <span class="sr-only">0% Complete</span> </div> </div> </p> <p> <div class="row"> <div class="col-lg-10"> <button class="btn btn-default" type="button" id="addSearchVariable" >Add</button> </div> </div> </p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" id="variableSearchDataCloseButton" data-dismiss="modal">Close</button> </div> </div> </div> </div> 

असल में यह jQuery DataTable साथ एक bootstrap 3 मोडल है, और एक प्रगति पट्टी के साथ उपयोगकर्ता को वर्तमान प्रगति दिखाने के लिए।

जावास्क्रिप्ट का उपयोग Django परिणाम प्राप्त करने के लिए किया जाता है:

 $('#chartSearchVariable').click(function(event) { $('#chartConfigModal').modal("hide"); $('#variableSearch').modal("show"); var csrftoken = getCookie('csrftoken'); var blockname = document.getElementById('chartConfigModalBlockname').value; $('#variableSearchProgressBar').css('width', "0%").attr('aria-valuenow', "0%"); event.preventDefault(); $.ajax( { type:"GET", url:"ajax_retreiveVariableNames/", timeout: 4000000, data: { 'csrfmiddlewaretoken':csrftoken, 'blockname':blockname }, success: function(response) { if(response.status == "invalid") { $('#chartConfigModal').modal("hide"); $('#variableSearch').modal("hide"); $('#invalid').modal("show"); } else { configurationVariableChart.row('').remove().draw(false); for (i = 0 ; i < response.variables.length; i++) { configurationVariableChart.row.add( $( '<tr>' + '<td>' + response.variables[i] + '</td>' + '<tr>' )[0]); } configurationVariableChart.draw(); $('#variableSearchProgressBar').css('width', "100%").attr('aria-valuenow', "100%"); } }, failure: function(response) { $('#chartConfigModal').modal("hide"); $('#variableSearch').modal("hide"); $('#invalid').modal("show"); } }); return false; }); $('#addSearchVariable').click(function(event) { $('#variableSearch').modal("hide"); $('#chartConfigModal').modal("show"); document.getElementById('chartConfigModalVariable').value = currentVariableNameSelects; }); $('#variableSearchDataCloseButton').click(function(event) { $('#variableSearch').modal("hide"); $('#chartConfigModal').modal("show"); }); 

समस्या अद्यतन तालिका भाग के साथ है:

  configurationVariableChart.row('').remove().draw(false); for (i = 0 ; i < response.variables.length; i++) { configurationVariableChart.row.add( $( '<tr>' + '<td>' + response.variables[i] + '</td>' + '<tr>' )[0]); } configurationVariableChart.draw(); $('#variableSearchProgressBar').css('width', "100%").attr('aria-valuenow', "100%"); 

प्रतिक्रिया के बाद से। देवताओं 10k से अधिक हो सकते हैं, और यह वेब ब्राउज़र को फ्रीज कर देगा, भले ही यह अभी भी ड्राइंग है।

मैं वेब डिज़ाइन (4 महीने से कम) के लिए बहुत ही नवीन हूं, लेकिन मुझे लगता है कि ये सभी एक ही धागे पर चल रहे हैं।

थ्रेडिंग / async करने के लिए जावास्क्रिप्ट का कोई तरीका है? मेरे पास एक खोज थी, और परिणाम स्थगित किए गए / वादा किए गए थे जो इस समय बहुत सार दिखते थे।

वेब के समाधान से एकत्रित समाधान "jQuery – थ्रेड / अतुल्यकालिक किया जा सकता है?"

संसाधित किए गए डेटा को संसाधित करने की कोशिश करें

नीचे दिए गए टुकड़े में, 250 के ब्लॉक में उत्पन्न तत्व, मुख्य रूप से jQuery के स्थगित.नोटिफ़ () और आस्थगित । प्रगति () का उपयोग

जब सभी 10,000 आइटम संसाधित होते हैं, deferred ऑब्जेक्ट को 10,000 तत्वों के संग्रह के साथ resolved जाता है। तब तत्वों को एक कॉल में .html() को deferred.then () के भीतर जोड़ दिया जाता है। .done() कॉलबैक; .fail() कॉलबैक null रूप में डाली

वैकल्पिक रूप से, deferred.progress भीतर 250 के ब्लॉक में document तत्वों को जोड़ सकते हैं। deferred.progress कॉलबैक; बजाय deferred.done भीतर एक कॉल पर, जो पूरे कार्य के पूरा होने पर होता है।

setTimeout को "वेब ब्राउज़र फ्रीज" स्थिति को रोकने के लिए उपयोग किया जाता है।

 $(function() { // 10k items var arr = $.map(new Array(10000), function(v, k) { return v === undefined ? k : null }); var len = arr.length; var dfd = new $.Deferred(); // collection of items processed at `for` loop in blocks of 250 var fragment = []; var redraw = function() { for (i = 0 ; i < 250; i++) { // configurationVariableChart.row.add( // $( fragment.push('<tr>' + '<td>' + arr[i] + '</td>' + '</tr>') // )[0]); }; arr.splice(0, 250); console.log(fragment, arr, arr.length); return dfd.notify([arr, fragment]) }; $.when(redraw()) // `done` callbacks .then(function(data) { $("#results").html(data.join(",")); delete fragment; } // `fail` callbacks , null // `progress` callbacks , function(data) { // log , display `progress` of tasks console.log(data); $("progress").val(data[1].length); $("output:first").text(Math.floor(data[1].length / 100) + "%"); $("output:last").text(data[1].length +" of "+ len + " items processed"); $("#results").html("processing data..."); if (data[0].length) { var s = setTimeout(function() { redraw() }, 100) } else { clearTimeout(s); dfd.resolve(data[1]); } }) }) 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <progress min="0" max="10000"></progress><output for="progress"></output> <output for="progress"></output><br /> <table id="results"></table> 

डिफर्ड / वादे यहाँ आपकी मदद नहीं करेंगे ब्राउज़र में जे एस हमेशा एक-थ्रेडेड होता है।

युगल के माध्यम से DOM तत्वों का निर्माण नहीं करना है। वह हमेशा महंगा और धीमी गति से होने वाला है जे.एस.एस.ओ. में डाटा को डीजेंग से पास करने और गतिशील रूप से एक डीओएम बनाने की बजाय, आपको डीजेंगो को सर्वर साइड पर एक टेम्पलेट टुकड़ा रेंडर करना चाहिए और यह पूरी तरह से फ्रंट-एंड को पास करना होगा, जहां पर जेएस बस संबंधित बिंदु पर इसे सम्मिलित कर सकता है ।