서버의 JQuery가 간헐적으로 만 실행됩니다 .appends()

Question

아래와 같이 일부 데이터를 가져 와서 div에 추가하기 위해 페이지가로드 될 때 끝점을 호출합니다. 로컬 호스트에서 완벽하게 작동하지만 서버에서만 간헐적으로 작동합니다 ... dev 도구를 보면 네트워크 탭에 $ .post가 작동하고 데이터가 반환됩니다.하지만 추가는 수행하지 않습니다.

html이 렌더링되기 전에 완료되는 $. post와 관련이 있는지 궁금해했습니다. 추가 할 div가 없지만이를 확인하거나 수정하는 방법을 모르겠습니다. html이 먼저 렌더링되도록 보장하기 위해 HTML 태그에서 스크립트를 close-body 태그 바로 앞에 이동 시키려고했습니다. 또한 $(Document).ready이 호출되기 전에 JS에서 함수를 정의했는지 확인했습니다.

$(document).ready(function() { 

    var page = 'blog-articles'; 
    $('#main-body-content').load('site/pages/' + page + '.php'); 
    loadArticlesData(); 

    $.post('endpoint/sendEvent.php', { 
    userID: '<?php echo $uid; ?>', 
    eventType: "pageView", 
    currentURL: window.location.href, 
    referer: '<?php echo $referer; ?>' 
    }); 

}); 

function loadArticlesData() { 
    $('#cover').show(); 
    $.post('endpoint/getArticles.php', { 
    type: "All" 
    }, function(result) { 
    var data = result; 
    $.each(data, function(i, l) { 
     $('#articles').append(
     '<a target="_blank" href="' + l.link + '">' + 
     '<div value="' + l.id + '" class="article">' + 
     '<div class="img">' + 
     '<img src="img/' + l.img + '" height="50px">' + 
     '</div>' + 
     '<div class="article-content">' + 
     '<h2>' + l.title + '</h2>' + 
     '<span class="description-text">' + l.description + '... <span style="font-style: italic; color: #888;">See more</span></span>' + 
     '</div>' + 
     '</div>' + 
     '</a>' 
    ); 
    }); 
    $('#cover').fadeOut("slow"); 
    }); 

    $.post('endpoint/getTags.php', {}, function(result) { 
    var data = result; 

    $.each(data, function(i, l) { 
     $('#tags').append(
     '<span value="' + l + '" class="tag-word">' + l + '</span> ' 
    ); 
    }); 
    }); 

} 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div id="cover"></div> 
<div class="body"> 
    <div class="body-container"> 
    <div class="body-left"> 
     <div style="text-align: left; padding-left: 20px;"> 
     <h1 style="font-weight: normal;">Blog Article Database</h1> 
     </div> 
     <div id="articles" class="articles"></div> 
    </div> 
    <div class="body-right"> 
     <div class="filter-panel"> 
     <h3>Browse (A-Z)</h3> 
     <div id="tags" class="tags"> 
      <span style="background: #fff; color: #0c7bce;" value="ALL" class="tag-word">ALL</span> 
     </div> 
     </div> 
    </div> 
    </div> 
</div> 

Answer 1

당신은 ... 당신이 블로그 페이지를 여러 번 클릭하려고하면, 당신은 때때로 중단 볼 -

는 www.everythingproduct.com ... 라이브 작동하지 보려면 비동기 요청을 방해합니다. 한 번에 하나의 작업을 수행하고 성공을 계속

이 시도 :

$('#main-body-content').load('site/pages/' + page + '.php', loadArticlesData); 

가 첫 번째 요청이 완료 될 때까지 기다려야 - 다음의 말에

$.post('endpoint/getTags.php', {}...

이동 두 번째 요청의 성공