Как обеспечить загрузку внешнего HTML до запуска скрипта

Question

Два дня поиска по всем связанным сообщениям и без успеха. В моем коде используется локальное хранилище для хранения и получения статуса флажков при обновлении страницы. Это хорошо работает. С тех пор я расширил свой код, чтобы загрузить флажки в div из внешнего HTML-файла, и это вызывает проблемы с синхронизацией. Код для управления локальным хранилищем выполняется слишком быстро, чтобы флажки были загружены в div. Многочисленные усилия по отсрочке кода потерпели неудачу, мои последние усилия были «setTimeout», которые не имеют предполагаемого эффекта (см. Скрипку). Кстати, с достаточным количеством «предупреждений», останавливающих код, я доказал, что все это может сработать. Пожалуйста, помогите мне с лучшим путем. Очень признателен. https://jsfiddle.net/Ldn2awxb/

https://code.jquery.com/jquery-2.2.3.min.js 


<div id="CountryCheckboxContainer"> 

<!--  Checkboxes below are loaded from external HTML file 

    <label><input type="checkbox" id="UN8" value="Albania" />Albania</label> 
    <label><input type="checkbox" id="UN40" value="Austria" />Austria</label> 
    <label><input type="checkbox" id="UN100" value="Bulgaria" />Bulgaria</label> 
--> 
</div> 




// Load from external files 
function LoadCheckboxes() { 
setTimeout(function() 
    { $("#CountryCheckboxContainer").load("https://c2ect538.caspio.com/dp.asp?AppKey=b8a94000b0cf30c15313458e91a0"); 
    }, 500); 
} 


// set and get items 
$(function() { 

LoadCheckboxes(); 

    var checkboxValues = JSON.parse(localStorage.getItem('checkboxValues')) || {}, 
    $checkboxes = $("#CountryCheckboxContainer :checkbox"); 

    $checkboxes.on("change", function() { 
    $checkboxes.each(function() { 
     checkboxValues[this.id] = this.checked; 
    }); 
    localStorage.setItem("checkboxValues", JSON.stringify(checkboxValues)); 
    }); 

    // On page load 
    $.each(checkboxValues, function(key, value) { 
    $("#" + key).prop('checked', value); 
    }); 
}); 

Answer 1

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

$(function(){ 
    function setupCheckboxes(){ 
    var checkboxValues = JSON.parse(localStorage.getItem('checkboxValues')) || {}, 
    $checkboxes = $("#CountryCheckboxContainer :checkbox"); 

    $checkboxes.on("change", function() { 
     $checkboxes.each(function() { 
     checkboxValues[this.id] = this.checked; 
     }); 
     localStorage.setItem("checkboxValues", JSON.stringify(checkboxValues)); 
    }); 

    $.each(checkboxValues, function(key, value) { 
     $("#" + key).prop('checked', value); 
    }); 
    }; 

    $("#CountryCheckboxContainer").load("https://c2ect538.caspio.com/dp.asp?AppKey=b8a94000b0cf30c15313458e91a0", setupCheckboxes); 
}); 

Answer 2

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

$.ajax({ 
    url: 'https://c2ect538.caspio.com/dp.asp?AppKey=b8a94000b0cf30c15313458e91a0', 
    success: function(content){ 
    $("#CountryCheckboxContainer").html(content); 
    //Put your behaviors here. 
    } 
}) 

Вы также можете сделать это таким образом, синхронно выполняя свой код. Что-то вроде этого:

$.ajax({ 
    url: 'https://c2ect538.caspio.com/dp.asp?AppKey=b8a94000b0cf30c15313458e91a0', 
    async: false, //It makes stops JS execution in the page, 
    success: function(content){ 
    $("#CountryCheckboxContainer").html(content); 
    } 
}) 
//And just keep your normal code. 

Если у вас есть еще одно важное содержание JS выполняется, например, аналитики Google или начальной загрузки, это будет проблемой, и на самом деле гораздо лучше делать первый вариант.