Ожидание Lazy Loaded объектов без блокировки? - PullRequest
Новая
       4

Ожидание Lazy Loaded объектов без блокировки?

1 голос
/ 24 мая 2009

У меня уже есть код, который лениво загружает скрипты по запросу. Моя проблема сейчас в ожидании выполнения определенного кода, пока объект не станет доступным. Я не могу использовать setTimeout (), потому что он не блокирует выполнение.

Так, что является хорошим способом "ждать" загрузки, не блокируя браузер?

Опять же, нельзя использовать raw setTimeout ().

Ответы [ 2 ]

3 голосов
/ 24 мая 2009

Предполагая, что вы контролируете содержимое вашего скрипта, вы можете поместить некоторый код для выполнения внизу вашего лениво загруженного скрипта, чтобы указать главной странице, что скрипт загружен. Например, на своей странице вы можете сделать что-то вроде этого: 

var loadingScripts = 0;
var loadScript = function() {
    // Do what you need to do to load the script...

    loadingScripts++;
}

var loadedScript = function() {
    loadingScripts--;
    if (loadingScripts == 0) {
        // Kick off execution of code that requires the lazy loaded scripts.
    }
}

Затем в вашем скрипте вы добавите этот код внизу: 

loadedScript();

Вы можете оживить этот пример массивом вместо целого числа (чтобы отслеживать, какие конкретные скрипты загружены). Вместо этого вы также можете использовать объект, чтобы связать определенные вызовы функций с завершением определенных сценариев. Я оставил свой пример простым, но спрашиваю, хотите ли вы, чтобы я показал, как расширить код.

Вот как вы можете использовать обратный вызов для продолжения выполнения определенного кода при загрузке скрипта (опять же, при условии, что вы сами контролируете скрипты). 

var scriptCallbacks = {}
var loadScript = function(scriptname, callback) {
    // Do what you need to load scriptname

    scriptCallbacks[scriptname] = callback;
}

var loadedScript = function(scriptname) {
    (scriptCallbacks[scriptname])();
}

Затем, когда вы хотите загрузить скрипт, вы делаете что-то вроде этого ... 

var callback = function() {
    // Write exactly what you want executed once your script is loaded
}

loadScript("MyScript.js", callback);

И снова, в вашем ленивом загруженном скрипте, просто добавьте этот код внизу, чтобы сообщить об обратном вызове: 

loadedScript("MyScript.js");
2 голосов
/ 24 мая 2009

Я бы на самом деле сделал это не так, как упоминал Даниэль. Все элементы запускают событие загрузки, когда они загружены, и файл Javascript загружается после того, как он оценил содержимое. Таким образом, вы можете установить обработчик событий для продолжения выполнения после того, как они доступны: 

var loadScript = function(fileName, callback) {
    var head = document.getElementsByTagName('head')[0];
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = fileName;

    script.onload = callback;
    script.onreadystatechange = function() {
        if(this.readyState == 'complete') {
            callback();
        }
    };
    head.appendChild(script);
};

И пример использования: 

var bar = function() {
    Foo.baz();
};
if(!window.Foo) {
    loadScript('Foo.js',bar);
} else {
    bar();
}
...