【问题标题】:Use Javascript to refresh a window after a loop has run its course循环运行后使用 Javascript 刷新窗口
【发布时间】:2020-02-28 13:47:54
【问题描述】:

我正在为我工​​作的公司编写一个新闻显示,我正在尝试让页面在遍历整个 JSON 数组长度后刷新。目前一切正常,但我不完全确定刷新命令会去哪里。目前它所在的位置没有执行。这是我的相关代码:

var i = 0,
    d = null,
    x = null,
    interval = 3000;

    console.log('welcome');

    $(document).ready(function(){
      fetch();
      console.log('fetching');
    });

    function fetch(){
      // get the data *once* when the page loads
      $.getJSON('info.json?ver=' + Math.floor(Math.random() * 100), function(data){
        // store the data in a global variable 'd'
        d = data[0];
        console.log('results');
        console.log(data);
        // create a recurring call to update()
        x = setInterval(function(){
          update()
        }, interval);
      });
    }

    function update(){
      console.log('update starting');
      // if there isn't an array element, reset to the first once
      if (d && !d[i]){
        console.log('got the D');
        clearInterval(x);
        i = 0;
        fetch();
        return;
        if(d[i] >= d.length){
          // refresh the window if the variable is longer than the array
          console.log('refreshing');
          window.location.reload();
        }
      }
      // remove the previous items from the page
      $('ul').empty();
      // add the next item to the page
      $('ul').append(
        '<li>' + d[i]['news']
        + '</li>'
      );
      // increment for the next iteration
      i++;

    }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='news'>
  <ul></ul>
</div>

【问题讨论】:

  • if(d[i] &gt;= d.length){ 应该是if(i &gt;= d.length){
  • 我可以看到的第一件事是在同一个块中(在更新函数中获取后)有一个返回语句,后跟代码。所以 return 正在停止执行函数。

标签: javascript jquery html loops page-refresh


【解决方案1】:
$.getJSON('info.json?ver=' + Math.floor(Math.random() * 100), function(data){
    //your code
}).done(function( data ) {
    window.location.reload();
});

在完成部分编写的函数将在完成主函数中的所有代码后执行

【讨论】:

  • .done(function(data){ 函数的放置导致页面立即刷新,而不执行 update() 函数循环遍历数组。
【解决方案2】:

我已经想出这个方向,我最初并没有计划这样做。我意识到,一旦我将用于版本控制的 RNG 包含到我的 .json 文件中,我实际上就不需要刷新页面了。我正在使用一个迭代循环,所以一旦循环完成它就会回到顶部,并重新打开info.json。我的 RNG 看起来像这样:

$.getJSON('info.json?ver=' + Math.floor(Math.random() * 100) + '.' + Math.floor(Math.random() * 100), function(data){
//code here
}

这意味着每次调用$.getJSON 时,它都会查看与以前不同的版本号,这会强制服务器检查和下载,从而使文件中的内容自行更新到屏幕上。网络来源如下所示:

info.json?ver=1.23
info.json?ver=2.42
info.json?ver=1.15

绝对不是我正在寻找的解决方案,但它实际上是比我的问题可能提出的更好的解决方案。

【讨论】:

  • 只是一个建议-您可以使用时间戳,而不是使用随机数;类似'info.json?t=' + Date.now()。这样,数字将始终是唯一的。使用随机数有机会(尽管因为您使用两个随机数)两次使用相同的数字,从而提取 JSON 文件的缓存副本。或者,设置服务器为目录中的 JSON 文件发送无缓存标头。至于重新加载,在增加 update 中的 i 之后类似 if(i &gt;= d.length) { window.location.reload(); } 可能会起作用,但这不能保证从服务器中提取 JSON。
  • 你是对的,我已经更新了我的代码来使用它。我认为获取随机时间戳比要求浏览器进行两次数学运算要好。此外,有了一个永远唯一的数字,刷新时事情会变得更好。感谢您的建议!
【解决方案3】:

如果我理解你的问题,你只需要知道你的 reload 函数在哪里是正确的?

嗯,它是window.location.reload();

【讨论】:

  • 我措辞错误。我需要知道循环运行后它会去哪里刷新页面。目前window.location.reload() 命令根本没有执行。我希望它在数组循环时重新加载
猜你喜欢
  • 2014-05-12
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2017-12-10
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多