ReadyState интерактивный против DOMContentLoaded - PullRequest
Новая
       44

ReadyState интерактивный против DOMContentLoaded

0 голосов
/ 01 июля 2018

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

Я прочитал несколько сайтов в Интернете, но они указали, что DOMContentedLoaded и readyState для интерактивного взаимодействия взаимозаменяемы, помимо поддержки старых браузеров. https://caniuse.com/#search=DOMContentLoaded https://developer.mozilla.org/en-US/docs/Web/API/Document/readyState

Итак, я исследовал это, и кажется, что если я вызову анонимную функцию в моем браузере (с тем же вызовом функции в нем), она будет иметь состояние готовности «интерактивный», но если я просто вызову функцию напрямую, она будет иметь готовое состояние «загрузки». Теперь в codpen.io и в фрагментах стеков он даже хорошо отрисовывается, но в моей локальной среде это приведет к ошибке и, в конечном счете, не должно ли состояние готовности быть интерактивным независимо?

В документе, на который я ссылался, говорилось о более широкой поддержке с использованием document.onreadychange, и я предполагаю, что для моей конкретной ситуации я бы пошел по этому пути, но я хотел спросить, не сталкивался ли кто-нибудь еще с этим? Я нахожусь на Chrome версии 67.0.3396.99 (Официальная сборка) (64-разрядная версия), протестирован на Chrome, Firefox и Opera с одинаковыми результатами. 

function DomLoaded(element) {
  console.log("Looking for " +element + " | current document state:" + document.readyState);
  var typelist = document.getElementById(element);
  listofTypes.forEach(function(currentvalue, index) {
    var option = document.createElement("option");
    option.text = currentvalue;
    typelist.add(option);
  });
}
var listofTypes = ["accounting", "airport", "amusement_park", "aquarium"];
document.addEventListener("DOMContentLoaded", function() {
DomLoaded("typelistanonfunc");});
document.addEventListener("DOMContentLoaded", DomLoaded("typelist"));
  <html>
<head>
    <title>Document Load</title>
</head>
<body>
    <h1 id="header1">Test 1</h1>
    <select id="typelist" style="max-width: 90%;"></select>
    <select id="typelistanonfunc" style="max-width: 90%;"></select>
</body>
</html>

1 Ответ

0 голосов
/ 01 июля 2018

Здесь: 

document.addEventListener("DOMContentLoaded", DomLoaded("typelist"));

вы вызываете функцию DomLoaded() и передаете возвращаемое значение (undefined) в addEventListener(). Это произойдет до того, как будет запущено событие «ready», и полученная ошибка будет вызвана тем, что целевой элемент <select> еще не находится в DOM.

Выражение типа something(somethingElse) является функцией call . Оценивается сразу во всех случаях.

Первая форма: 

document.addEventListener("DOMContentLoaded", function() { DomLoaded("typelist"); });

правильно. Выражение функции, созданное вокруг вызова вашего обработчика, является , а не вызовом функции; это просто ссылка на эту анонимную функцию. Это правильно создаст обработчик события для события «ready» (DOMContentLoaded).

...