javascript - tag - title html w3schools
El tamaño máximo de pila de llamadas superó el error (23)
Estoy usando un archivo de biblioteca JavaScript Direct Remoting Directo (DWR) y obtengo un error solo en Safari (escritorio y iPad)
Dice
Se excedió el número máximo de llamadas a la pila.
¿Qué significa exactamente este error y deja de procesar completamente?
También cualquier solución para el navegador Safari (en realidad en el iPad Safari , dice
JS: la ejecución excedió el tiempo de espera
que estoy asumiendo es el mismo problema de pila de llamadas)
Algunas veces puede obtener esto si accidentalmente importa / incrusta el mismo archivo JS dos veces, vale la pena revisar su pestaña de recursos del inspector :)
Algunas veces sucedió debido al tipo de datos de conversión, por ejemplo, usted tiene un objeto que consideró como una cadena.
socket.id en nodejs, ya sea en js client como ejemplo, no es una cadena. para usarlo como cadena tienes que agregar la palabra cadena antes:
String(socket.id);
El problema con la detección de flujos de desbordamiento de pila es que a veces la traza de la pila se desenrollará y no podrá ver lo que realmente está sucediendo.
He encontrado algunas de las nuevas herramientas de depuración de Chrome útiles para esto.
Presiona la Performance tab , asegúrate de que las Javascript samples estén habilitadas y obtendrás algo como esto.
¡Es bastante obvio dónde está el desbordamiento aquí! Si hace clic en extendObject podrá ver el número de línea exacto en el código.
También puede ver los horarios que pueden o no ser útiles o una pista falsa.
Otro truco útil si realmente no puede encontrar el problema es poner muchas declaraciones de console.log donde crea que se encuentre el problema. El paso anterior anterior puede ayudarte con esto.
En Chrome, si genera repetidamente datos idénticos, se mostrará de esta manera, mostrando dónde está más claro el problema. En este caso, la pila alcanzó 7152 cuadros antes de que finalmente se estrellara:
El problema en mi caso es porque tengo una ruta de hijos con la misma ruta que el padre:
const routes: Routes = [
{
path: '''',
component: HomeComponent,
children: [
{ path: '''', redirectTo: ''home'', pathMatch: ''prefix'' },
{ path: ''home'', loadChildren: ''./home.module#HomeModule'' },
]
}
];
Así que tuve que quitar la línea de la ruta de los niños.
const routes: Routes = [
{
path: '''',
component: HomeComponent,
children: [
{ path: ''home'', loadChildren: ''./home.module#HomeModule'' },
]
}
];
En mi caso, dos modales de jQuery se mostraban apilados uno encima del otro. Prevenir que resolviera mi problema.
En mi caso, el evento click se estaba propagando en un elemento hijo. Entonces, tuve que poner lo siguiente:
e.stopPropagation ()
en el evento de clic:
$(document).on("click", ".remove-discount-button", function (e) {
e.stopPropagation();
//some code
});
$(document).on("click", ".current-code", function () {
$(''.remove-discount-button'').trigger("click");
});
Aquí está el código html:
<div class="current-code">
<input type="submit" name="removediscountcouponcode" value="
title="Remove" class="remove-discount-button">
</div>
En mi caso, estaba convirtiendo una matriz de bytes grande en una cadena usando lo siguiente:
String.fromCharCode.apply(null, new Uint16Array(bytes))
bytes contenían varios millones de entradas, que es demasiado grande para caber en la pila.
En mi caso, estaba enviando elementos de entrada en lugar de sus valores:
$.post( '''',{ registerName: $(''#registerName'') } )
En lugar de:
$.post( '''',{ registerName: $(''#registerName'').val() } )
Esto congeló mi pestaña de Chrome hasta un punto en el que incluso me mostró el cuadro de diálogo "Esperar / matar" para cuando la página deje de responder ...
Estaba tratando de asignar una variable, un valor, cuando esa variable no había sido declarada.
Declarar la variable solucionó mi error.
Estoy usando Devexpress Scheduler en Angular y el problema es el uso incorrecto de la variable asignada a la etiqueta de fuente de datos del programador.
Hay un bucle recursivo en algún lugar de su código (es decir, una función que eventualmente se llama a sí misma una y otra vez hasta que la pila está llena).
Otros navegadores tienen pilas más grandes (por lo que obtienes un tiempo de espera) o se tragan el error por alguna razón (tal vez un intento de captura mal colocado).
Utilice el depurador para comprobar la pila de llamadas cuando se produce el error.
Las dos invocaciones del código idéntico a continuación, si se reducen en 1, funcionan en Chrome 32 en mi computadora, por ejemplo, 17905 vs 17904. Si se ejecutan como están, se producirá el error "RangeError: El tamaño máximo de la pila de llamadas excedió". Parece que este límite no está codificado, sino que depende del hardware de su máquina. Parece que si se invoca como una función, este límite autoimpuesto es mayor que si se invoca como un método, es decir, este código en particular usa menos memoria cuando se invoca como una función.
Invocado como método:
var ninja = {
chirp: function(n) {
return n > 1 ? ninja.chirp(n-1) + "-chirp" : "chirp";
}
};
ninja.chirp(17905);
Invocada como una función:
function chirp(n) {
return n > 1 ? chirp( n - 1 ) + "-chirp" : "chirp";
}
chirp(20889);
Me enfrenté al mismo problema, lo resolví eliminando un nombre de campo que se usó dos veces en ajax, por ejemplo
jQuery.ajax({
url : ''/search-result'',
data : {
searchField : searchField,
searchFieldValue : searchField,
nid : nid,
indexName : indexName,
indexType : indexType
},
.....
Otra opción que causa este error si convierte a json con socket.
export class User {
constructor(socket: Socket, name: string) {
this.socket = socket;
this.name = name;
}
name : string;
socket : Socket;
}
...
let json: string = JSON.stringify(user);
Sé que este hilo es antiguo, pero creo que vale la pena mencionar el escenario en el que encontré este problema para que pueda ayudar a otros.
Supongamos que tiene elementos anidados como este:
<a href="#" id="profile-avatar-picker">
<span class="fa fa-camera fa-2x"></span>
<input id="avatar-file" name="avatar-file" type="file" style="display: none;" />
</a>
No puede manipular los eventos de elementos secundarios dentro del evento de su elemento primario porque se propaga a sí mismo, realizando llamadas recursivas hasta que se lanza la excepción.
Entonces este código fallará:
$(''#profile-avatar-picker'').on(''click'', (e) => {
e.preventDefault();
$(''#profilePictureFile'').trigger("click");
});
Tienes dos opciones para evitar esto:
- Mueva al niño al exterior del padre.
- Aplicar la función stopPropagation al elemento hijo.
Si está trabajando con google maps, verifique si el tiempo de espera se está pasando a new google.maps.LatLng tiene el formato adecuado. En mi caso fueron pasados como indefinidos.
Si necesita ejecutar un proceso / recursión infinito por algún motivo, puede usar un trabajador web en un hilo separado. http://www.html5rocks.com/en/tutorials/workers/basics/
Si desea manipular elementos de dom y redibujar, use la animación http://creativejs.com/resources/requestanimationframe/
Significa que en algún lugar de tu código, estás llamando a una función que a su vez llama a otra función y así sucesivamente, hasta que alcanzas el límite de la pila de llamadas.
Esto casi siempre se debe a una función recursiva con un caso base que no se cumple.
Viendo la pila
Considere este código ...
(function a() {
a();
})();
Aquí está la pila después de un puñado de llamadas ...
Como puede ver, la pila de llamadas crece hasta que alcanza un límite: el tamaño de la pila codificada por el navegador o el agotamiento de la memoria.
Para solucionarlo, asegúrese de que su función recursiva tenga un caso base que se pueda cumplir ...
(function a(x) {
// The following condition
// is the base case.
if ( ! x) {
return;
}
a(--x);
})(10);
También me enfrenté a un problema similar aquí son los detalles al cargar el logotipo usando el cuadro de carga desplegable del logotipo
<div>
<div class="uploader greyLogoBox" id="uploader" flex="64" onclick="$(''#filePhoto'').click()">
<img id="imageBox" src="{{ $ctrl.companyLogoUrl }}" alt=""/>
<input type="file" name="userprofile_picture" id="filePhoto" ngf-select="$ctrl.createUploadLogoRequest()"/>
<md-icon ng-if="!$ctrl.isLogoPresent" class="upload-icon" md-font-set="material-icons">cloud_upload</md-icon>
<div ng-if="!$ctrl.isLogoPresent" class="text">Drag and drop a file here, or click to upload</div>
</div>
<script type="text/javascript">
var imageLoader = document.getElementById(''filePhoto'');
imageLoader.addEventListener(''change'', handleImage, false);
function handleImage(e) {
var reader = new FileReader();
reader.onload = function (event) {
$(''.uploader img'').attr(''src'',event.target.result);
}
reader.readAsDataURL(e.target.files[0]);
}
</script>
</div>
CSS.css
.uploader {
position:relative;
overflow:hidden;
height:100px;
max-width: 75%;
margin: auto;
text-align: center;
img{
max-width: 464px;
max-height: 100px;
z-index:1;
border:none;
}
.drag-drop-zone {
background: rgba(0, 0, 0, 0.04);
border: 1px solid rgba(0, 0, 0, 0.12);
padding: 32px;
}
}
.uploader img{
max-width: 464px;
max-height: 100px;
z-index:1;
border:none;
}
.greyLogoBox {
width: 100%;
background: #EBEBEB;
border: 1px solid #D7D7D7;
text-align: center;
height: 100px;
padding-top: 22px;
box-sizing: border-box;
}
#filePhoto{
position:absolute;
width:464px;
height:100px;
left:0;
top:0;
z-index:2;
opacity:0;
cursor:pointer;
}
Antes de la corrección mi código era:
function handleImage(e) {
var reader = new FileReader();
reader.onload = function (event) {
onclick="$(''#filePhoto'').click()"
$(''.uploader img'').attr(''src'',event.target.result);
}
reader.readAsDataURL(e.target.files[0]);
}
El error en la consola:
Lo resolví eliminando onclick="$(''#filePhoto'').click()" de la etiqueta div.
Tuve este error porque tenía dos funciones JS con el mismo nombre
Verifique los detalles del error en la consola de la barra de herramientas de desarrollo de Chrome, esto le dará las funciones en la pila de llamadas y lo guiará hacia la recursión que está causando el error.
en mi caso, recibo este error en la llamada ajax y los datos que intenté pasar esa variable no se han definido, es decir, me muestra este error pero no describe esa variable no definida. Agregué definida que la variable n tiene valor.
puede encontrar su función recursiva en el navegador crome, presionar ctrl + shift + j y luego la pestaña de fuente, que le proporciona el flujo de compilación del código y puede encontrar usando el punto de interrupción en el código.