javascript - 在 JavaScript 中加载

Question

我有一个 Javascript 函数，看起来像这样......

function loadInventory() {
  var json = [<?php echo $_SESSION['inventory']; ?>];

  for(var i = 0; i < json.length; i++) {
    var obj = json[i];
    for(var key in obj.rgDescriptions) {
      document.getElementById('userInventory').innerHTML += '<div class="col-sm-4"><div style="background-color: #2e2e2e;">'+obj.rgDescriptions[key].market_hash_name+'</div></div>';
      document.getElementById('loader').classList.remove('loader');
    }
  }
}

显然，这个功能需要几秒钟才能完成，这不是问题。

但是，我想在运行该函数之前完全加载页面，因为页面有一个加载动画，一旦添加 HTML，该动画就会在 loadInventory() 中删除。

我尝试过这样做...

$(document).ready(function() {
  $(window).load(function() {
    loadInventory();
  });
});

但是效果似乎不太好。该函数在页面完全加载之前运行，因此您看不到加载动画。

结论:

我想完全加载页面。完成后，我想运行 loadInventory() ，这将向页面添加更多 HTML。

抱歉，搞得一团糟，这真的很难解释!

Answer 1

使用setTimeout()推迟运行该函数。

$(document).ready(function() {
    setTimeout(loadInventory, 1);
});

由于setTimeout通过事件循环异步运行该函数，因此只有在加载页面的所有同步操作完成后才会调用该函数。