jQuery $ .post provoque un débordement de pile de navigateur

Question

je le code jQuery suivant:

var id_atual 
var temp_id 
var tempo_flash = 50 
var $slide_atual = $('#slider .atual') 
var $slide_prox = $('#slider .ocultar') 
setInterval(function(){ 
    id_atual = $slide_atual.attr('alt') 
    $.post('get_banner.php', {atual: id_atual}, function(proximo){ 
     temp_id = proximo.split(';;') 
     $slide_prox.attr('src', temp_id[0]).load(function(){ 
      $slide_atual.hide('fade', tempo_flash, function(){ 
       $slide_atual.attr('alt', temp_id[1]).attr('src', temp_id[0]).load(function(){ 
        $slide_atual.show('fade', tempo_flash) 
       }) 
      }) 
     }) 
    }) 
}, 4000) 

Et le code HTML suivant:

<div id="slider"> 
    <img src="imagens/slider/imagen-slider.jpg" alt="1" class="atual"/> 
    <img src="" alt="" class="ocultar" /> 
</div> 

Lorsque la classe .ocultar ont une

display: none; 

Le vars tempo_flash est seulement le temps d'animation, et le fichier get_banner.php sert uniquement à obtenir la bannière suivante de la base de données mysql. Il est testé et fonctionne bien. Le problème que j'ai est qu'après un peu (4 ou 5 bannière changeant) le navigateur arrête de répondre (pour Firefox Chrome et Opera) et sur IE j'obtiens une alerte Stack overflow at line: 3 et le javascript de la page entière arrête de fonctionner.

Toute aide appréciée!

Answer 1

A l'intérieur de chaque itération de la fonction setInterval() ed, vous affectez un événement .load() à un espace réservé pour l'image. L'affectation d'un événement à un objet ne supprime pas les événements existants! Par conséquent, lors de la deuxième itération, le détenteur de l'emplacement de l'image aura deux gestionnaires d'événements .load(), puis trois et ainsi de suite; et chaque fois que l'image est chargée, tous les gestionnaires d'événements associés à l'événement .load() sont déclenchés. Vous avez probablement besoin de re-factoriser votre code, peut-être en affectant le gestionnaire d'événements .load() une seule fois (et d'utiliser des points-virgules).

Answer 2

vous ne devriez pas utiliser setInterval, vous devez utiliser un setTimeout dans une fonction, et l'exécuter sur le rappel de la .post de $, quelque chose comme:

var id_atual 
var temp_id 
var tempo_flash = 50 
var $slide_atual = $('#slider .atual') 
var $slide_prox = $('#slider .ocultar') 
function tictac(){ 
    setTimeout(function(){ 
     id_atual = $slide_atual.attr('alt') 
     $.post('get_banner.php', {atual: id_atual}, function(proximo){ 
      temp_id = proximo.split(';;') 
      $slide_prox.attr('src', temp_id[0]).load(function(){ 
       $slide_atual.hide('fade', tempo_flash, function(){ 
        $slide_atual.attr('alt', temp_id[1]).attr('src', temp_id[0]).load(function(){ 
         $slide_atual.show('fade', tempo_flash) 
        }) 
       }) 
      }) 
     }) 
     ticktac(); 
    }, 4000); 
} 

cette façon, les 4 secondes seulement LANCER compter si et quand la réponse du serveur est terminée, vous n'aurez pas vos problèmes de débordement