JQuery: Execute fade in only once on page load

Question

I have some divs which I am using JQuery to refresh those divs every 10 seconds to check for updated data and display it. All of it works great with one small exception. When the page first loads it takes 10 seconds for it to show data in certain divs since the timer is set at 10 seconds then it pops up. Which looks rather rough. So what I am trying to do is fade in that data on first load. I just need it ONLY when the page first loads otherwise it will fade in every 10 seconds which I don't want. I am very new to JQuery and haven't been able to find anything that does what I am looking for. So how can I fade in the data only once when the page first loads.

Here is an example of the script of how I am refreshing the data.

function auto_load(){
        $.ajax({
          url: "inc/location_status.php",
          cache: false,
          success: function(data){
             $("#locationNotify").html(data);
          } 
        });
}

$(document).ready(function(){

auto_load(); //Call auto_load() function when DOM is Ready

});

//Refresh auto_load() function after 10000 milliseconds
setInterval(auto_load,10000);

Then for example in the HTML where I want the data to appear I just do something like this.

<div id="locationNotify"></div>

EDIT

Here is an example of how I have made it made fade in. Problem with this method is every time the div is refresh/update it fades in. I am trying to have it where it only fades in once and that is when the page is first loaded. Is there a stop event I can add so that it only fades in once on page load and not every time the script refreshes/updates the div every 10 seconds.

function auto_load(){
        $.ajax({
          url: "inc/location_status.php",
          cache: false,
          success: function(data){
             $("#locationNotify").html(data).hide().delay().fadeIn(500);
          } 
        });
}

Answer 1

This should be able to help guide you towards what you desire.

 /* Set Anonymous Function */ (function autoLoad(fadeIn) { /* Set Testing Post ID */ var postId = Math.floor(Math.random() * 100); /* Call Ajax */ $.ajax({ url: '//jsonplaceholder.typicode.com/comments/' + postId, cache: false, success: function(data) { $('#locationNotify').html(data.name); if(fadeIn) { $('#locationNotify').hide().delay().fadeIn(500); } } }); /* Set Tiemout */ setTimeout(function() { autoLoad(false); }, 10 * 1000); }(true)); 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="locationNotify" class="alert alert-danger text-center" style="display:none"></div>