Cómo cargar la función javascript en window.onload después de un retraso

Question

Tengo un par de funciones que se deben activar después de un retraso en el evento de carga. Funciona bien en Chrome, pero no en Firefox.

function foo() { 
    // javascript code 
} 

window.onload = setTimeout(foo, delay); 

function bar() { 
    // javascript code 
} 

window.onload = setTimeout(bar, delay); 

Si quito el retraso, 'bar' se invoca en Firefox y 'foo' y 'bar' conseguir invoca en cromo. ¿Cuál podría ser el problema aquí?

Answer 1

trate de envolver el tiempo de espera en una función:

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

Answer 2

me sorprende ambas funciones consiguen invocarse en cualquier navegador. Sin embargo, es posible que tenga mejor suerte con algo como:

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

function bar() { 
    // javascript code 
} 

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

Editar: No importa, voy a ver por qué tanto de los tiempos de espera ejecutar. Cuando haces algo como:

window.onload = setTimeout(bar, delay);

... no son en realidad estableciendo window.onload para ejecutar su función después de un retraso. En su lugar, esto invoca de inmediato setTimeout() para programar su llamada de función y asignar el resultado (un identificador a la invocación de función programada) al window.onload. Esto no es correcto, y probablemente cause un error de tiempo de ejecución en algunos navegadores cuando intentan invocar window.onload como una función.

Lo que se quiere hacer en su lugar es asignar una función a window.onload, como:

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

Answer 3

Se puede usar jQuery con algo así:

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

o

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

jQuery agrega automáticamente funciones para apilar, y las ejecuta todas una vez que se desencadena el evento.

Si desea hacerlo sólo con JS, puede hacer gran variedad de funciones para activar:

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); 
     } 
    } 

espero que ayude.

Answer 4

Veo dos errores de base en su código. En primer lugar, si desea pasar una función como argumento, debe escribir el nombre de la función sin paréntesis; si agrega el paréntesis, la función será ejecutada en ese momento. Ver un ejemplo:

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

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

En segundo lugar, si se asigna un valor al atributo .onload con el operador = sobrescribirá su valor anterior, al igual que a = 3 sobrescribe el valor anterior de a.

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

Por lo capto, su problema principal es ser capaz de añadir en lugar de reemplazar controladores de eventos. Como de costumbre, no hay una API universal que pueda usar con seguridad en todos los navegadores.Si está utilizando un marco o una biblioteca, probablemente proporcione un mecanismo de navegador cruzado. De lo contrario, necesita encontrar o escribir el suyo. En el pasado, he utilizado esto en varios proyectos:

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

... aunque no ha sido actualizado desde el año 2005 por lo que me aseguraría de que funciona correctamente en los navegadores recientes.