javascript - jQuery animations not being actioned correctly -

can fresh eyes on what's happening here, please?

the function supposed be: check new data, if new > fade out > reload > fade in, if it's not new data don't animate. it's fading out , in everytime checks new data, wasn't doing when had have open 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) }); 

keep in mind i've been 20+ hours little sleep may obvious.

try use dry principle - don't repeat yourself.

set timeout regardless of data each time, , perform animation inside if:

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