1

Buenas, tengo una variable nombre dentro del document.ready a la que quiero acceder desde fuera de document.ready pero no puedo. Si declaro la variable fuera del document.ready, cuando le asigno algún valor dentro del document.ready, este se pierde cuando salgo.

He leido que si declaras la variable desde fuera de la función, esta se hace global y se puede acceder desde todo el documento pero algo estoy haciendo mal.

Pongo la variable nombre como ejemplo.

        $(document).ready(function(){
         url = new URL(location.href); //Mediante esta propiedad accedemos a la dirección URL completa de la página mostrada en una ventana
            datos = JSON.parse(url.searchParams.get('objJson')); //Hacemos el proeso inverso, convertimos el string enviado a objeto Json
                //La propiedad searchParams de la interfaz URL devuelve un objeto URLSearchParams que permite el acceso a los argumentos de consulta GET contenidos en la URL.
                for(var i = 0; i < datos.length; i++){
                    //alert(datos[i].api_key);
                }
            nombre="adios";

            }); 

        alert(nombre);
Xerif
  • 7,283
  • 3
  • 17
  • 41
Lorenzo Martín
  • 623
  • 1
  • 18
  • 43
  • Lo he probado y puedo acceder a la variable sin modificar tu código. De todas formas prueba a declarar la variable antes de la función `document.ready` de la siguiente forma: `var nombre = "";` de esta forma fuerzas a que el ámbito de la variable sea global. – Galbi Sep 21 '17 at 09:08
  • Creo que el problema planteado en la pregunta se debe a un error de percepción sobre el uso de `document.ready`. Quizá la respuesta a esta pregunta: [¿Cuál es la diferencia entre window.onload y $(document).ready()?](https://es.stackoverflow.com/a/51961/29967) ayude a aclarar algunos conceptos. – A. Cedano Sep 21 '17 at 14:30

2 Answers2

4

Sí, en general, si quieres que una variable sea accesible para varias funciones, debes declararla en el contexto donde están declaradas esas funciones.

Pero no entiendo para qué la quieres fuera de $(document).ready(function () {...}, lo normal y deseable es que todo tu código esté dentro de esa función:

let miVariable='antes'
$(function () { //jQuery aconseja esto en lugar de $(document).ready(...
  miVariable='despues';
});
alert(miVariable)  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Como podrás ver, la variable tiene el valor 'antes', porque el alert se ejecutará antes que el código que espera a que el documento esté listo.

Pablo Lozano
  • 45,934
  • 7
  • 48
  • 87
  • Muchas gracias por vuestra ayuda. La idea es hacer un menu "Dinamico" con la variable Json datos de la funcion, por eso necesito poder pintar la variable para que aparezca en el titulo del menu.. – Lorenzo Martín Sep 21 '17 at 09:20
1

Me parece que te estás liando un poco. El problema de tu código no es que no puedas acceder a la variable nombre desde fuera de la función definida en el método $(document).ready, si no que cuando accedes a la variable nombre todavía no se ha inicializado por lo que no tiene ningún valor.

Si utilizas una variable sin declararla previamente con una instrucción var javascript generar una variable en el contexto global de manera automática que puede ser accedida desde cualquier parte de tu código. Esto no es una buena práctica pero funciona. Si lo que quieres es definir una variable global es preferible que la declares expresamente en este contexto.

En tu código el problema es que la función de $(document).ready no se ejecuta hasta que finaliza la carga de la página, mientras que alert(nombre); se ejecuta de forma inmediata según se interpreta el código con lo que se ejecuta antes de que se haya asignado ningún valor a la variable.

Si creas, fuera del contexto de $(document).ready una función que acceda al valor nombre y la ejecutas después de que se haya ejecutado el código que inicializa la variable verás que puedes acceder a su contenido sin problemas.

Mira este ejemplo. El primer console.log mostrará el valor undefined porque se ejecuta antes de que se inicialice la variable. El de la función mostrarNombre mostrará el valor de la variable una vez inicializada:

// Declaración global para que sea accesible desde todo el código
var nombre;

// Código que se ejecuta una vez que se haya finalizado la carga de la página
$(document).ready(function(){
  var url = new URL(location.href);
  var datos = JSON.parse(url.searchParams.get('objJson'));

  // .....
  
  // Inicializamos la variable
  nombre="adios";
  
  // Una vez inicializado llamamos a mostrarNombre
  mostrarNombre();
}); 

// Este código se ejecuta antes de finalizar la carga de la página por lo que nombre es 'undefined'
console.log('Valor antes de inicializar: ' + nombre);

// Función que muestra el valor de nombre
function mostrarNombre(){
  console.log('Valor desde mostrarNombre: ' + nombre);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Asier Villanueva
  • 14,299
  • 2
  • 13
  • 31