jQuery animazioni non eseguite correttamente

Question

Posso avere nuovi occhi su quello che sta succedendo qui, per favore?

La funzione dovrebbe essere: Verifica nuovi dati, se nuovo> dissolvenza in chiusura> ricarica> dissolvenza in apertura, se non sono nuovi dati non animati. Tuttavia ora sta svanendo e in ogni momento controlla i nuovi dati, cosa che non stava facendo quando l'avevo aperto in dev.

$(function() { 
    function reload(elem, interval) { 
     var $elem = $(elem); 
     var $original = $elem.html(); 
     $.ajax({ 
      cache: false, 
      url: 'track.php', 
      type: 'get', 
      success: function(data) { 
       if ($original == data) { 
        setTimeout(function() { 
        $("#air_track").fadeOut(); 
         reload(elem, interval) 
        $("#air_track").fadeIn("slow"); 
        }, interval); 
        return 
       } 
       $elem.html(data); 
       setTimeout(function() { 
        reload(elem, interval) 
       }, interval) 
      } 
     }) 
    } 
    reload('#air_track', 5000) 
}); 

Tenere a mente Sono stato in su per più di 20 ore con poco sonno quindi potrebbe davvero essere davvero ovvio.

Answer 1

Cerca di utilizzare il principio ASCIUTTO: non ripeterti.

impostare il timeout a prescindere dei dati di volta in volta, ed eseguire l'animazione all'interno del if: (! $ Originale = dati)

$(function() { 
    var reload = function(elem, interval) { 
    var $el = $(elem); 

    $.ajax({ 
     cache: false, 
     url: 'track.php', 
     type: 'get', 
     success: function(data) { 
     var html = $.parseHTML(data); 
     var newText = $(html).text().trim(); 
     var current = $el.find('span').text().trim(); 
     if (current != newText) { 
      $el.fadeOut(function() { 
      $el.html(data).fadeIn('slow'); 
      }); 
     } 
     setTimeout(function() { 
      reload(elem, interval); 
     }, interval) 
     } 
    }); 
    }; 

    reload('#air_track', 5000); 
});