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函數先運行？

類似於此問題我應該如何調用3個函數才能一個接一個地執行它們？ 但是我有很多功能。 我不能將它們全部都用作初始函數的回調。 我也不願意將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對象上調度事件：

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'
});

在此處閱讀有關事件的更多信息