Не выполняйте остальную часть кода до загрузки внешнего скрипта

Question

Я работаю над небольшим скриптом букмарклета (один большой IIFE). Сценарий ранее был создан для страниц, содержащих jQuery, и широко использует jQuery.

Проблема заключается в том, что мы сейчас начинаем отходить от jQuery в некоторых наших продуктах, но все равно нужно, чтобы этот букмарклер функционировал одинаково.

Итак, я хочу обновить букмарклет, чтобы он сначала проверил, существует ли jQuery на странице.

если jQuery, продолжение выполнение как обычно.

Если! JQuery, скачайте jQuery (AJAX), затем выполните оставшуюся часть скрипта.

Проблема в том, что я не уверен, как это сделать внутри IIFE. Поскольку выборка скрипта будет асинхронным действием, как я могу убедиться, что jQuery загружен и хорошо идти до продолжения скрипта? Это то, что я до сих пор ..

(function() { 
    var continueExec = true; 
    if (!window.jQuery) { 
     continueExec = false; 
     var s = document.createElement('script'); 
     s.onload = function() { 
      continueExec = true; 
     }; 
     s.src = 'https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'; 
     document.head.appendChild(s); 
    } 
     // .. now I want to be able to use jQuery here. What do I need to change? 
     // $('.className')... 
})() 

отмечают, что, так как это bookmarket, он получает впрыскивается в страницу после загрузки/рендеринга, так что это не так просто, как поместить блок сценария JQuery выше головы ,

Answer 1

В javascript вам нужен обратный вызов для обработки асинхронных операций.

В вашем примере мы можем выполнить такую ​​функцию обратного вызова для двух сценариев:
а) JQuery уже определен
б) JQuery был загружен и готов к использованию

Так мы изменим код немного и передать обратный вызов IIFE, который содержит основное приложение, и вызвать его для обоих сценариев.

(function (callback) { 
    if (!window.jQuery) { 
     var s = document.createElement('script'); 
     s.onload = function() { 
      // Start the main application once jQuery was load: 
      callback(window.jQuery); 
     }; 
     s.src = 'https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'; 
     document.head.appendChild(s); 
    } else { 
     // Start the main application directly as jQuery is already part of the page: 
     callback(window.jQuery); 
    } 
})(function($) { 
    // The main application 
    // 
    // here you can use 
    // $('.className')... 
});