jQuery：僅在頁面加載一次執行淡入

Question

我有一些div，我正在使用JQuery每10秒刷新一次這些div，以檢查更新的數據並顯示它。 所有這些都很好用，只有一個例外。 當頁面首次加載時，由於計時器設置為10秒，所以它需要10秒才能在某些div中顯示數據，然后它會彈出。 看起來比較粗糙。 所以我想做的是在第一次加載時淡入該數據。 我只在頁面首次加載時才需要它，否則它會每10秒消失一次，這是我不想要的。 我對JQuery還是很陌生，還沒有找到能滿足我所需要的東西。 因此，如何在頁面首次加載時僅淡入數據一次。

這是我如何刷新數據的腳本示例。

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);

然后例如在HTML中我希望數據出現的地方，我只是做了這樣的事情。

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

編輯

這是我如何使其淡入的示例。此方法的問題是每次div刷新/更新時它都會淡入。我試圖將其放置在僅淡入一次（即頁面被淡入）的位置。首先加載。 我是否可以添加停止事件，以便它僅在頁面加載時淡入一次，而不是在腳本每10秒刷新/更新一次div時才消失。

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

Answer 1

這應該能夠幫助您指導自己想要的東西。

 /* 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>