Yinelemeli bir jQuery sözünün doğru bir şekilde kodlanması

Question

Zaten çok sorulan bir soruyu yineliyorum, ama şimdiye kadar gördüğüm her şey bana yineleyici görünmüyor ya da yaptığımız şeyle eşleşmiyorsa affedin. sözler ve ertelenmiş konu benim için oldukça karmaşık görünüyor.

Kullanıcı düğümleri genişlettikçe eşzamansız olarak oluşturulmuş bir "konu ağacı" var. Bu konu, bir düğümün alt öğelerini, ağaç düğümündeki (+) düğmesinin tıklatılarak döndüren bir API bitiş noktası kullanılarak oluşturulmuştur.

kullanıcı düğmeye tıkladığında ı yinelemeli şöyle bir yöntem kullanılarak konu ağaç elemanlarını yüklemeyi deneyin: Yani buna benzerdi gereken budur

function getAssociatedTopics(){ 
    $.get('/topics/curriculum-associations', {guids: [...]}) 
    .then(function(data){ 

     //Process the topic information here 
     var topicId = /* some processing */; 

     //Get ancestors of each topic returned 
     $.get('/topics/getAncestors', {of: topicId}) 
     .then(function(data){ 

      //Process the topic information here 
      var topicId = /* some processing */; 

      //Get ancestors of each topic returned 
      //Rinse repeat as long as we find children of each topic found 


     }); 

    }).then(function(){ 

     //Expand the nodes 
     //Select the nodes 

    }); 
} 

ama tüm okuma kaybettim belgelerin doğru sırayla yürütüldüğünden emin olmak için ... Şu anda bu yapıyla karşılaştığımız büyük sorun, düğümlerimin hepsi eşzamanlı bir şekilde yüklendikten sonra seçilen düğümleri silip, düğümleri açıp kapatabiliyor. seçim süper dağınık biter.

Sözlerin derinlemesine açıklanmasını istemiyorum, tam bir çözüm istemiyorum, ancak bunun nasıl gerçekleştirileceğine dair genel bir fikir.

Answer 1

İlk önce, İhtiyacınız olanı almanın karmaşıklığı, istemcide değil, sunucuda ele alınmalıdır. İstemciden yüzlerce HTTP isteği yapmak, gerçekleşmesini bekleyen bir performans felaketidir.

bunu nasıl yaparım Şimdi

, iki önemli gerçekler:

• Sözler dönüş değeri kullanarak çalışır. $.get, değer için bir söz verir - bu yüzden then'u kapatabilirsiniz, ancak bunu dışarıya da döndürebilirsiniz.
• Bir then işleyicisinden bir söz verdiğinizde, söz verdiğiniz ilk söz, iç çözümün ilk çözümlenmesini beklemek üzere then'un kendisinden bekler. Eğer tüm aramaların sonuçlarını gerekiyorsa

  function getAssociatedTopics(guids) { 
      // note the `return` here so it can be chained from outside 
      return $.get('/topics/curriculum-associations', {guids: guids}) 
      .then(function(data){ 
       var topicId = someProcessing(data); 
       // note we return here. I assume this get returns guids. 
       return $.get('/topics/getAncestors', {of: topicId}) 
      }).then(function (guids) { // this anonymous function can be inlined 
       if(guids.length === 0) return; // stop condition 
       return getAssociatedTopics(guids); // note the recursive call, remember point #2. 
      }); 
  } 
  getAssociatedTopics(initial).then(function(){ 
      // all done 
  }); 
  

  , bunu zincirlemek edebilirsiniz: gerçek sorun için,

  $.get("/api").then(function(data) { 
      return $.get("/api2/" + data.id); 
  }).then(function(data2) { 
      // because of point #1, we get the data of the inner call here. 
  }); 
  

  Şimdi: Burada

iki noktayı gösteren bir örnektir kapalı veya sonuncudan önceki bir kapama değişken dizisine basabilir ve tüm işleyiciye erişebilirsiniz.