jQuery确保一个函数在所有其他函数之前运行的最佳方法

Question

我想阅读一个文本文件并将其内容提供给变量并在任何地方使用该变量。

var latest_date = "";
$.get('/data/latest_data.txt', function(data) {
  latest_date = data; // eg "20180102"
}, 'text');

// and lots of similar functions like this
$(function() {
  $.getJSON('../data/' + latest_date + '/overview.json', function(data){
    $('#overview').DataTable(data);
  });
});

但是，在latest_date变量获得正确值之前，其他函数将运行。如何确保$.get功能先于其他功能运行？

它类似于这个问题How should I call 3 functions in order to execute them one after the other? 但我有很多功能。我不能将它们全部作为初始函数的回调。我也不愿意为所有功能添加timeOut。有没有更好的办法？

Answer 1

您可以在get方法返回的jqXHR上使用Promise对象。例如：

var promise = $.get('/data/latest_data.txt', 'text').promise();

promise.then(function (latest_date) {
    $.getJSON('../data/' + latest_date + '/overview.json', function (data) {
        $('#overview').DataTable(data);
    });
});

Answer 2

您可以使用一个事件然后附加多个侦听器来调用文件加载后需要调用的函数：

第一个请求完成时，window对象上的Dispatch事件：

var latest_date = "";
$.get('/data/latest_data.txt', function(data) {
  latest_date = data; // eg "20180102"
   window.dispatchEvent(new Event('content:loaded'))
}, 'text');

听取事件来呼叫其他人。

window.addEventListener('content:loaded', function() {
   $.getJSON('../data/' + latest_date + '/overview.json', function(data){
      $('#overview').DataTable(data);
   });
});

如果要避免使用全局变量，也可以在事件中发送latest_date变量：

window.dispatchEvent(new CustomEvent('content:loaded', {
    detail: {
        latest_date: 'date',
    }
}));

window.addEventListener('content:loaded', function(e) {
    console.log(e.detail.latest_date); // = 'date'
});

阅读更多关于活动here的信息