JQuery：在加载页面时只执行一次淡入淡出

我有一些div，我正在使用JQuery每10秒刷新一次这些div以检查更新后的数据并显示它。除了一个小例外，所有这些都很有效。当页面第一次加载时，它需要10秒钟才能显示某些div中的数据，因为定时器设置为10秒，那么它弹出。看起来很粗糙。所以我试图做的是在第一次加载时淡入这些数据。我只是在页面第一次加载时才需要它，否则它会在每10秒钟内淡出，这是我不想要的。我对JQuery非常陌生，无法找到任何符合我所需要的内容。那么我怎么才能在页面第一次加载时淡入一次数据。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>

编辑

下面是我如何使它取得了褪色的例子，用这种方法的问题是每一个股利是刷新时间/更新它消失。我想有它只是一次淡入，这是页面首次加载的时间。是否有停止事件可以添加，以便在页面加载时只会淡入一次，而不是每次脚本每隔10秒刷新/更新div时都会淡入。

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

来源

2017-06-01 Texan78

在准备你在呼唤一个auto_load（）;哪个是对的。它应该在不等待10秒的情况下加载数据。检查你的网络电话需要多少时间？ –

@Dinesh我想这似乎需要10秒。我知道它在页面完全加载后几秒钟加载。我的主要问题是，如何在第一次加载页面时只将数据淡入一次。传统的方式使得它在每次重新加载时都会消失。 – Texan78

研究jQuery'one（）'。它就像'on（）'，但在执行后设置off（）。 – Daerik

这应该能够帮助引导你走向你的愿望。

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

来源

2017-06-01 20:06:52 Daerik

JQuery：在加载页面时只执行一次淡入淡出

回答

相关问题