Wie kann ich diesen Ajax-Aufruf nicht asynchron machen?

Question

Ich kann einfach nicht die getCategory Funktion erhalten, um alles außer undefined oder false zurückzugeben. Ich bin in der Konsole durchgetreten und alle Daten sind da. Ich bin auf dem besten Weg, immer noch unsicher Funktionen syncronosly

function getCategory(url) { 

    if (url) { 
     let message = false 
     $.ajax({ 
      url: url, 
      global: false, 
      type: 'GET', 
      dataType: 'json', 
     }).done(function(data) { 
      message = `<a class="post__category post__link" href="${data[0].link}">${data[0].name}</a>` 
      return message 
     }) 
    } else { 
     return '' 
    } 
} 

function posts() { 

    $.get(WPPosts, data => { 

     data.forEach(d => { 

      const excerpt   = d.excerpt.rendered.substr(0, characterCount) 
      const featuredImage  = d._links['wp:featuredmedia'] 
      const featuredImageURL = featuredImage ? featuredImage[0].href : '' 

      const terms    = d._links['wp:term'] 
      const category   = terms.filter(term => term.taxonomy === 'category') 
      const categoryURL  = category[0].href 



      let post = `<article class="column"> 
          <div class="decoration decoration__paper decoration__tape decoration__tape--left text-center post"> 

           <a href="${d.link}"> 
            ${ getFeaturedImage(featuredImageURL) } 
           </a> 

           <h2 class="post__title">${d.title.rendered}</h2> 

           <p> 
            ${d.date_gmt} 
            ${ getCategory(categoryURL) } 
           </p> 

           <div class="post__excerpt"> 
            ${excerpt}... <a class="post__link" href="${d.link}">Read more</a> 
           </div> 
          </div> 
         </article>` 

      post = $.parseHTML(post) 
      postsWrapper.append(post) 
     }); 
    }) 
} 

ich die { async: false } Option

Answer 1

Ausgabe gibt es hier zu vermeiden versuchen, rufen zu machen, ist viele Anrufe bekommen geschehen durch ‚getCategory‘ nach dem ersten Anruf erhalten .

Wir können die Logik so ändern, dass Daten innerhalb des Anchor-Tags geladen werden, sobald der für das Anchor-Tag relevante Aufruf erfolgt ist.

ändern Ankertag es eine eindeutige ID geben: (Verwenden Sie eine beliebige ID, die Sie möchten)

<a href="${d.link}" id="${d.link}"> 
            Loding ..${ getFeaturedImage(featuredImageURL,${d.link}) } 
           </a> 

Dann Funktion ändern lesen ID:

function getCategory(url,id) { 

    if (url) { 
     let message = ''; 
     $.ajax({ 
      url: url, 
      global: false, 
      type: 'GET', 
      dataType: 'json', 
     }).done(function(data) { 
      message = `<a class="post__category post__link" href="${data[0].link}">${data[0].name}</a>` 

      $("#"+id).html(message); // append data to anchor tag rather than returning. 
     }) 
    } else { 
     $("#"+id).html(''); 
    } 
}