How to delay my javascript code until a JSON file is loaded?

I have a web application built with jQuery, and I need to load some JSON data before anything else is done. Currently, I'm doing it like this:

我有一个使用jQuery构建的Web应用程序,我需要在完成任何其他操作之前加载一些JSON数据。目前,我这样做:

<html>
  ...
  <script type="text/javascript">
    // Load the data (directly injected into the HTML)
    var json = { ... };

    // Once the full DOM is loaded, do whatever I need
    $(whatever);

    function whatever() { ... }
  </script>
  ...
</html>

It works, but it's extremely ugly. I'd rather load the actual JSON file, for example using jQuery's getJSON with a callback function. But calling AJAX functions in a synchronous way isn't allowed anymore (at least with jQuery). So... how do I make sure that my whatever method isn't called until that callback has finished?

它有效,但它非常难看。我宁愿加载实际的JSON文件,例如使用带有回调函数的jQuery的getJSON。但是不再允许以同步方式调用AJAX函数(至少使用jQuery)。那么......在回调完成之前,我如何确保不会调用任何方法?

Just calling $(whatever) from my callback function is not an option, because I actually have many of those $() distributed across the different pages of the application.

只是从我的回调函数调用$(无论如何)不是一个选项,因为我实际上有许多$()分布在应用程序的不同页面上。

2 个解决方案

#1

There is a simpler way of doing things ;)

有一种更简单的做事方式;)

let json = {}
$(document).ready(() => {
  function whatever() {
    // do some stuff
    console.log('run the program');
  }
  $.getJSON('https://jsonplaceholder.typicode.com/users', (data) => {
      json = data;
      console.log(json);
    })
    .then(() => whatever());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Some paragraph</p>

#2

I have found two different ways to implement it. First, using the .holdReady() function in jQuery:

我找到了两种不同的方法来实现它。首先,在jQuery中使用.holdReady()函数:

The $.holdReady() method allows the caller to delay jQuery's ready event. This advanced feature would typically be used [...] to load [...] before allowing the ready event to occur

$ .holdReady()方法允许调用者延迟jQuery的ready事件。在允许就绪事件发生之前,通常会使用此高级功能来加载[...]

So in my case, the code should look like this:

所以在我的情况下,代码应如下所示:

<html>
  ...
  <script type="text/javascript">
    var json = {};
    $.holdReady(true);
    $.getJSON(url, '', function(data) {
      json = data;
      $.holdReady(false);
    });

    $(whatever);
  </script>
  ...
</html>

Another option, using custom events (thanks to freedomn-m's suggestion in the comments), would be something like this:

另一种选择,使用自定义事件(感谢评论中的*建议),将是这样的:

<html>
  ...
  <script type="text/javascript">
    var json = {};
    // Request the JSON file
    $.getJSON(url, '', function(data) {
      // When it's retrieved, store the data in the `json` variable
      json = data;
      // And when the DOM is ready...
      $(function() {
        // ...trigger the custom `jsonReady` event
        $(document).trigger('jsonReady');
      });
    });
  </script>
  ...
</html>

The only change required is to replace all the $(whatever); for $(document).on('jsonReady', whatever);.

唯一需要做的改变是更换所有$(无论如何); for $(document).on('jsonReady',what);.

#1