javascript - 有时，jQuery 仅在首页加载时更新元素

Question

我正在通过创建一个程序来学习 javascript，该程序请求 API 并将各种属性(本例中的价格)显示为 html。我对我的代码有一些疑问以及我一直面临的一些问题。

1).我有一堆$.getJSON与我想要检索的每个值相对应的函数。我把它们全部放在一个 2 分钟内。计时器。然而，当页面首次加载时，某些 html 元素根本无法加载。但如果我刷新页面，它们有时会加载。如果我再次刷新，它们可能根本无法再次加载。每次刷新时，该特定函数有 10% 的可能性不会在元素中插入内容。如果它确实加载并且我让页面保持打开状态，它将正确运行(每 2 分钟更新其值和 html 元素，并添加/删除绿色和红色类)。如果它没有加载并且我让页面保持打开状态，那么当发出第二个 api 请求时，它将在 2 分钟内正常运行。我已经测试过变量在每个 $('#price').text('$' + price); 之前和之后都有一些值(不为空)。 .

下面是执行此操作的函数示例:

var tempPrice;
var myVar = setInterval(myTimer, 1200000);
myTimer();

function myTimer() {
  $.getJSON(link, function (json) {
    $.each(json, function (index, value) {
      if (value.id == "price") {
        var price = value.price_eur;
        if (!tempPrice) {
          $('#price').text('$' + price);
          tempPrice = parseFloat(price);
        }
        if (parseFloat(price) !== tempPrice) {
          $('#price').text('$' + price).removeClass();
          if (parseFloat(price) > tempPrice) {
            setTimeout(function () {
              $('#price').addClass("green");
            }, 1);
          } else {
            setTimeout(function () {
              $('#price').addClass("red");
            }, 1);
          }
          tempPrice = parseFloat(price);
        }
      }
    });
  });
  // Many more $.getJSON functions below...
}

如果我在 jsfiddle 或我的开发服务器(flask)上单独运行这个函数，它工作得很好。只有当我将它与更多 api 请求结合使用时，它才会崩溃。如果我没记错的话，以前我没有遇到过这个问题，当时我曾经为每个 $.getJSON 有一个单独的计时器。函数并将每个放在自己的 <script> 中直接在 html 中标记。

2) 我知道我可以循环 json 而不是使用 $.each 。我还能如何改进代码？

Answer 1

1

至于您遇到的初始页面加载行为不一致的问题，这是因为您在给浏览器时间首先完全加载页面之前执行了 JavaScript。您只需等待页面加载，然后执行代码即可解决此问题。

jQuery 示例:

$(document).ready(function() {
    // Page is loaded, execute code...
});

2

为了帮助您改进处理所提供 JSON 数据的方式，数据示例会很有用。