Решение: Кажется, что проблема была связана с тем, как я вызывал свой механизм очередей в window.onload.Ошибка вызова функции Javascript в голове, но не в теле
Преамбула - Я рад видеть, что меня помещают как дубликат, где решение заключается в использовании window.onload, которое я уже здесь использую. Несколько комментариев указывают на возможные проблемы с очередью, которую я получил от другого решения stackoverflow, но оставляю меня в темноте из-за отсутствия разработки.
Вопрос: Если я делаю вызов функции в голове, он терпит неудачу. Если я делаю вызов функции в теле, он преуспевает. Зачем?
Расширение: Почему успешно выполняются вызовы одной и той же функции в global.js, которая находится выше неудачного вызова?
У меня есть javascript, который создает загрузочную «очередь» сортировки (функция addLoadEvent в global.js). Вызов этой функции добавляет очередь в том случае, когда вызывается onload.
Кроме того, я обнаружил, что вызов конкретной функции сценария завершается с ошибкой, если он находится в голове и в теле. Я не могу понять, почему, потому что все, что необходимо (другие функции js) загружаются над вызовом функции, а фактический вызов функции не запускается до onload, гарантируя наличие необходимых элементов html.
Порядок загрузки:
- HTML файл до головы
- global.js - в том числе addLoadEvent (FUNC)
- addLoadEvent x2 (преуспевает)
- встроенный скрипт в head - includes initialFighter()
- addLoadEvent (место один - сбой)
- HTML файл после того, как головной
- addLoadEvent (место два - успешно)
- OnLoad запускает в очереди вызовов
Для целей этот вопрос, вызов функции, который терпит неудачу или преуспевает на основе его местоположения, следующий.
addLoadEvent(initialFighter());
Вот укороченный HTML-код, обратите внимание, что отмечены 2 местоположения. Если я скопирую вставку вышеуказанного вызова функции на место 1, он терпит неудачу. Если я скопирую вставку вышеприведенного вызова функции в «Место два», он будет успешным.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="global.js"></script>
<script type="text/javascript">
function showFighter(id) {
var pic = document.getElementById("picture");
var picPath = 'url(images/' + id + '.png)';
pic.style.backgroundImage = (picPath);
}
function initialFighter() {
var fighter = getURLParameter('fighter');
if (typeof(fighter) != "undefined" && fighter != null) {
showFighter(fighter);
} else {
showFighter('Foobar');
}
}
***** LOCATION ONE *****
</script>
</head>
<body>
<header></header>
<nav id="nav"></nav>
<section id="fighters">
<div id="picture"></div>
<div id="text"></div>
<script type="text/javascript">
***** LOCATION TWO *****
</script>
</section>
<footer id="footer"></footer>
</body>
</html>
Ниже global.js, который является очень первый файл сценария загружен:
Обратите внимание, что есть 2 addLoadEvent (FUNC) вызывает здесь, и они преуспевают (не запускаются, пока HTML элементов существуют), несмотря на то, что они превышают практически все остальное.
function addLoadEvent(func) {
var prevOnLoad = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (prevOnLoad) {
prevOnLoad();
}
func();
}
}
}
function loadFile(id, filename) {
var xmlhttp;
if (window.XMLHttpRequest) {
xmlhttp=new XMLHttpRequest();
}
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
document.getElementById(id).innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open('GET', filename, true);
xmlhttp.send();
}
addLoadEvent(loadFile('nav', 'nav.txt'));
addLoadEvent(loadFile('footer', 'footer.txt'));
function getURLParameter(name) {
return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.search) || [null, ''])[1].replace(/\+/g, '%20')) || null;
}
'addLoadEvent (loadFile ('nav', 'nav.txt'));' не делает то, что, по вашему мнению, делает. – zzzzBov
Аргумент 'addLoadEvent' должен быть функцией, а не вызовом функции. – Barmar
Не могли бы вы прояснить эти комментарии? Если он не делает то, что я думаю, что он делает, как он все еще работает в большинстве мест? Барнар, вы указываете, что я отправляю неверные параметры в addLoadEvent, но почему-то все еще работает в большинстве случаев? Если бы параметры были неправильного типа, не было бы ошибкой 100%? – Doug