jQuery动画未正确执行

Question

请帮我审视一下这里发生了什么？

该函数的作用应该是：检查新数据，如果有新数据，则进行淡出、重新加载、淡入，如果没有新数据，则不进行动画。然而现在每次检查新数据时都会进行淡出和淡入，而当我在开发中打开它时并没有这样做。

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

请记住，我已经熬了20多个小时，睡眠很少，所以可能非常明显。

- James Lawson

---

我认为你的意思是 if ($original != data)。 - Rory McCrossan

在这里添加一个 jsfiddle，你很快就会得到帮助 :) - Magnus Karlsson

@MagnusKarlsson 我本来想这样做的，但是脚本需要请求服务器端文件，所以我不得不放弃。 - James Lawson

Answer 1

尽量使用DRY原则 - 不要重复自己。

每次都设置超时时间，无论数据如何，并在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);
});

- Brian

---

我明白你的意思，但是在检查数据时它仍然会进行动画处理，只有在有新数据需要加载时才应该进行动画处理。目前我将其托管在这里：http://stream.oxygenrad.io/trouble.php - James Lawson

无论是否有新数据，它每次检查时仍会进行动画。 - James Lawson

只是为了澄清一下：pastebin因为脚本现在出错了。 - James Lawson

我不想说，但脚本仍然有问题。我已经在父级div中添加了一些文本（它包含span），如果脚本正常工作，这些文本应该消失。http://stream.oxygenrad.io/trouble.php - James Lawson

所以你可以修剪文本以获得完美匹配。直接解析文本不可靠。你可以在HTML中添加数据属性并检查是否已更改。 - Brian

我想我必须找到另一种方式以“几乎实时”的方式加载新数据。无论如何，它仍然会出现错误。 - James Lawson