पिछले तक प्रतीक्षा करें .append() पूरा हो गया है

Question

हम append कैसे बना सकते हैं पिछले append पूरा होने तक प्रतीक्षा करें। मैं बड़ी मात्रा में डेटा जोड़ रहा हूं इसलिए वर्तमान परिशिष्ट को जांचना चाहिए कि पिछला परिशिष्ट पूरा हो गया है या नहीं। मैं कुछ समय के साथ सभी परिशिष्ट स्वतंत्र रूप से देकर ऐसा करने में सक्षम हूं। लेकिन व्यावहारिक रूप से मेरे कोड के अनुसार मेरे पास 'एन' संख्या संलग्न हो सकती है, इसलिए मैं इसे गतिशील रूप से करना चाहता हूं।

मैंने लूप के लिए या प्रयोग करते समय कोशिश की लेकिन स्क्रिप्ट दूषित हो रही है और ब्राउज़र क्रैश हो रहा है क्योंकि अगला एपेंड पूरा होने से पहले शुरू हो रहा है।

---

$('#printall1').click(function() { 
$('#fourElementsonly').empty(); 
var cleartable = 0; 
var maxlimit = 0; 
var presentarraycount = 0; 
$.post("/PortalUserReport/getjunkdata", null, function(response, status) { 
    var report = eval(response); 
    var totalRecordsCount = report.length; //6000 
    var totalRecordsCountfortheLoop = totalRecordsCount; 
    var arraycount = Math.ceil(totalRecordsCount/1000); 
    var reports = new Array(arraycount); // reports[6] 
    for (var i = 0; i < arraycount; i++) { 
     $('#fourElementsonly').append('<table border = "1" id = "Portal_User_elements' + i + '" style = " border-collapse:collapse; width:800px; margin:0px; padding:0px; border-color:black"> </table>'); 
    } 
    reports[presentarraycount] = ""; 
    $.each(report, function(x) { 
     if (cleartable == 0) { 
      for (var i = 0; i < arraycount; i++) { 
       $('#Portal_User_elements' + i).empty(); 
      } 
      cleartable++; 
     } 
     if (recordnumber <= totalRecordsCountfortheLoop) { 
      reports[presentarraycount] += "<tr style = \"height:20px; border: 1px Solid Black\"> <td style = \"width:50px; text-align:center \"> " + recordnumber + " </td> <td style = \"width:350px;\"> Name :" + report[x].FirstName + "</td> <td style = \"width:200px;\"> UserName :" + report[x].UserName + " </td> <td style = \"width:200px; \"> Company : " + report[x].Company + " </td> </tr>"; 
      reports[presentarraycount] += "<tr style = \"height:20px; border: 1px Solid Black\"> <td > </td> <td> Registration Date : <label class = \"datepicker\"> " + report[x].ActiveDate + " </label> <td> User CN : " + report[x].UserCN + " </td> <td> Status: " + report[x].Status + " </td> </ td> </tr>"; 
      reports[presentarraycount] += "<tr style = \"height:20px; border: 1px Solid Black\"> <td> </td> <td> User Privilege : " + report[x].Privileges + " </td> <td> </td> </tr>"; 
      maxlimit++; 
      if (maxlimit == 1000) { 
       presentarraycount++; 
       reports[presentarraycount] = ""; 
       maxlimit = 0; 
      } 
     } 
     recordnumber++; 
    }); 
    for (var i = 0; i < arraycount; i++) { 
     $(this).delay(1000, function() { 
      $('#Portal_User_elements' + i).append(reports[i]); 
     }); 
    } 
}); 

}); 

Answer 1

नीचे दिया गया समाधान सभी ब्राउज़रों विशेष रूप से आईई 6 पर काम कर रहा है। फ़ायरफ़ॉक्स में प्रतिक्रिया समय 10 सेकंड है, लेकिन आईई 6 में यह 2 मिनट 30 सेकंड है।

$('#printall1').click(function() { 
    $('#fourElementsonly').empty(); 
    var cleartable = 0; 
    var maxlimit = 0; 
    var presentarraycount = 0; 

    $.post("/PortalUserReport/getjunkdata", null, function(response, status) { 
     var report = eval(response);// we have 6000 records in the report now 
     var totalRecordsCount = report.length; // count = 6000 
     var totalRecordsCountfortheLoop = totalRecordsCount; 
     var arraycount = Math.ceil(totalRecordsCount/1000); 
     var reports = new Array(arraycount); // reports[6] 
     for (var i = 0; i < arraycount; i++) { 
      $('#fourElementsonly').append('<table border = "1" id = "Portal_User_elements' + i + '" style = " border-collapse:collapse; width:800px; margin:0px; padding:0px; border-color:black"> </table>'); 
     } 
     reports[presentarraycount] = ""; 
     $.each(report, function(x) { 
      if (cleartable == 0) { 
       for (var i = 0; i < arraycount; i++) { 
        $('#Portal_User_elements' + i).empty(); 
       } 
       cleartable++; 
      } 

      if (recordnumber <= totalRecordsCountfortheLoop) { 
       reports[presentarraycount] += "<tr style = \"height:20px; border: 1px Solid Black\"> <td style = \"width:50px; text-align:center \"> " + recordnumber + " </td> <td style = \"width:350px;\"> Name :" + report[x].FirstName + "</td> <td style = \"width:200px;\"> UserName :" + report[x].UserName + " </td> <td style = \"width:200px; \"> Company : " + report[x].Company + " </td> </tr>"; 
       reports[presentarraycount] += "<tr style = \"height:20px; border: 1px Solid Black\"> <td > </td> <td> Registration Date : <label class = \"datepicker\"> " + report[x].ActiveDate + " </label> <td> User CN : " + report[x].UserCN + " </td> <td> Status: " + report[x].Status + " </td> </ td> </tr>"; 
       reports[presentarraycount] += "<tr style = \"height:20px; border: 1px Solid Black\"> <td> </td> <td> User Privilege : " + report[x].Privileges + " </td> <td> </td> </tr>"; 
       maxlimit++; 
       if (maxlimit == 1000) { 
        presentarraycount++; 
        reports[presentarraycount] = ""; 
        maxlimit = 0; 
       } 
      } 
      recordnumber++; 
     }); 

     for (var i = 0; i < arraycount; i++) { 
      $('#Portal_User_elements' + i).append(reports[i]); 
     } 
    }); 
}); 

Answer 2

आप एक ही तत्व विभिन्न तत्वों के लिए या करने के लिए जोड़कर हैं? यदि आप एक तत्व में शामिल हैं, तो आपके सभी डेटा को संयोजित करना और एक खंड के रूप में जोड़ना आसान हो सकता है।

इसके अलावा, डेटा कहां से है? डेटा स्थिर है (गैर ajax) तो आप कॉल करने के लिए

$('selector').append(data1).append(data2).append(data3); 

Answer 3

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

See Here कुशलता से परिशिष्ट का उपयोग करने के तरीके के बारे में कुछ जानकारी के लिए। यह कितना अधिक हो जाता है कि आप अपने सभी टेक्स्ट को एक चर में प्राप्त करने का प्रयास कर सकते हैं और बस एक बार जोड़ना चाहते हैं।

[अपडेट] चूंकि आपके पास JSON ऑब्जेक्ट में अपना सभी डेटा प्राप्त करने के बाद से है, बस अपनी लूपिंग करें और इसे सभी को एक चर में रखें, फिर बस एक बार समाप्त होने के बाद इसमें शामिल हों। [/ अद्यतन]

Answer 4

मैं तुम्हें कैसे अपने कोड सुधारने के लिए कुछ संकेत दे सकते हैं।

for (var i = 0; i < arraycount; i++) { 
     $('#fourElementsonly').append('<table border = "1" id = "Portal_User_elements' + i + '" style = " border-collapse:collapse; width:800px; margin:0px; padding:0px; border-color:black"> </table>'); 
    } 

बन सकता है:

var html = ''; 
    for (var i = 0; i < arraycount; i++) { 
     html += '<table border = "1" id = "Portal_User_elements' + i + '" class="portalUserElements"> </table>'; 
    } 
    $('#fourElementsonly').append(html); 

आप पूरा होगा: '#fourElementsonly'

कम कोड को

• 999 कम jQuery चयन इंजेक्ट किया जा सकता है अगर आप कक्षा में डाल "पोर्टल यूज़र एलीमेंट्स" शैलियों:
  सीमा-पतन: पतन; चौड़ाई: 800px; मार्जिन: 0px; गद्दी: 0px; सीमा-रंग: काला

इसका मतलब है आप भी कर सकते हैं:

for (var i = 0; i < arraycount; i++) { 
     $('#Portal_User_elements' + i).empty(); 
    } 

(पाश के लिए कोई बन जाता है!):

$('.portalUserElements').empty(); 

और:

for (var i = 0; i < arraycount; i++) { 
    $('#Portal_User_elements' + i).append(reports[i]); 
} 

मई बन:

$('.portalUserElements').each(
    function(i) { 
     $(this).append(reports[i]); 
    } 
); 

संपादित: इन परिवर्तनों को आपके एल्गोरिथ्म के प्रदर्शन में सुधार करने के लिए सुझाव दिया है, जबकि यह पूरी फीचर को बनाए रखने प्रदान करता है।
आप एक स्ट्रिंग वैरिएबल (टेबल सहित) के अंदर सब कुछ कॉम्पैक्ट करना चाहते हैं और इसे अंत में जोड़ सकते हैं।
उन लेखों को देखें जिन्हें रसेल कैम ने आपके उत्तरों में से एक में सुझाव दिया था।

Answer 5

एक भद्दा तरीका ...

एक समारोह (मौजूदा समारोह) संलग्न कर देता है ही करता है। कोड जो अनुलग्नकों का पालन करता था उसे एक नए फ़ंक्शन "किकऑफ द रेस्टऑफ द प्रोसेस" में लपेटा जाता है।

आपके सभी शुरुआती परिशिष्टों के बाद, आप एक अंतिम जोड़ जोड़ते हैं। यह अन्य सभी तक निष्पादित नहीं होगा।

$('body')).append("<script>kickOffTheRestOfTheProcess();</script>"); 

यह मेरे लिए काम करता है।

Answer 6

शायद एक और तरीका यह जांचने के लिए हो सकता है कि आप जिस कंटेनर के अंदरूनी एचटीएमएल की लंबाई को अपने मतदान समारोह में सामग्री के आखिरी हिस्से की लंबाई के बराबर बराबर कर रहे हैं या नहीं।

यदि संलग्न नहीं है, तो ऐसा संलग्न करें।

el.append('<span>random stuff</span>').append('{{randomFunction()}}'); 

Answer 7

animuson से जवाब के आधार पर, मैं लोगों को जवाब ऊपर मैं कोणीय में ऐसा किया पर पाया इस समाधान बहुत ही सुंदर होना करने के लिए ...

$(".selector").append(content).append(function() { //code goes here to run }); 

Answer 8

इमारत :)

का उपयोग करते हुए फ़ंक्शन।

$('<div id="appendedItem">Here</div>').appendTo("body"); 
$.when($("#appendedItem").length > 0).then(function(){ 
    console.log($("#appendedItem").length); 
}); 

Answer 9

बहुत ही सरल: