Как загрузить функцию javascript в window.onload после некоторой задержки

Question

У меня есть пара функций, которые должны запускаться после некоторой задержки в событии загрузки.Он отлично работает в Chrome, но не в Firefox.

function foo() {
    // javascript code
}

window.onload = setTimeout(foo, delay);

function bar() {
    // javascript code
}

window.onload = setTimeout(bar, delay);

Если я удаляю задержку, в Firefox вызывается 'bar', а в chrome - 'foo' и 'bar'.В чем может быть проблема здесь?

Answer 1

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

function foo() {
    // javascript code
    setTimeout(bar, additionalDelay);
}

function bar() {
    // javascript code
}

window.onload = function() { setTimeout(foo, delay); };

Правка: неважно, я понимаю, почему оба таймаута выполняются.Когда вы делаете что-то вроде:

window.onload = setTimeout(bar, delay);

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

Вместо этого вы хотите назначить функцию для window.onload, например:

window.onload = function() { 
    setTimeout(foo, delay); 
    setTimeout(bar, delay);
};

Answer 2

Вы можете использовать jQuery со следующим:

$(document).ready(function() { /* your code */ });

или

$(window).load(function() { /* your code */ });

jQuery автоматически добавляет функции в стек и запускает их все после срабатывания события.

Если вы хотите сделать это только с JS, вы можете создать массив функций для запуска:

function a() {
        alert('a');
    }

    function b() {
        alert('b');
    }

    var arr = new Array(a, b);

    window.onload = function() {
        for(var i = 0; i < arr.length; i++) {
            setTimeout(arr[i], 1000);
        }
    }

Надеюсь, это поможет.

Answer 3

Я вижу две базовые ошибки в вашем коде. Прежде всего, если вы хотите передать функцию в качестве аргумента, вам нужно написать имя функции без скобок; если вы добавите скобки, функция будет выполнена прямо тогда. Смотрите пример:

function foo(){
    alert("I am foo");
}
function bar(){
    alert("I am bar");
}

setTimeout(foo, 5000);
setTimeout(bar(), 10000);

Во-вторых, если вы присвоите значение атрибуту .onload с помощью оператора =, вы перезапишете его предыдущее значение, так же как a = 3 перезапишет предыдущее значение a.

function foo(){
    alert("I am foo");
}
function bar(){
    alert("I am bar");
}
window.onload = foo;
window.onload = bar;

Исходя из того, что я понимаю, ваша главная проблема в том, чтобы иметь возможность добавлять вместо замены обработчиков событий. Как обычно, нет универсального API, который можно безопасно использовать во всех браузерах. Если вы используете фреймворк или библиотеку, это, вероятно, обеспечивает кросс-браузерный механизм. В противном случае вам нужно найти или написать свой собственный. В прошлом я использовал это в нескольких проектах:

• http://dean.edwards.name/weblog/2005/10/add-event2/

... хотя он не обновлялся с 2005 года, поэтому я должен убедиться, что он работает должным образом в последних браузерах.

Answer 4

Попробуйте заключить тайм-аут в функцию:

window.onload = function(delay) {
                  setTimeout(foo, delay); 
                  setTimeout(bar, delay); 
                };