JQuery анимация, только если информация AJAX не совпадает

Question

У меня есть таймер каждые 20 секунд, использующий setInterval, он использует функцию jjuery ajax load () для установки div toparticles с информацией из другого URL на сайте. Как только эта загрузка успешна, она выполняет эффект выделения jQuery для первой статьи в div toparticles. Все статьи в обоих местах хранятся в отдельной таблице, поэтому я использую таблицу #toparticles: first.

Я хочу выполнить загрузку только в div toparticles И анимацию, если первая статья не совпадает.

Итак, концепция такова: Каждые 20 секунд: Проверьте этот URL-адрес, если первая таблица не совпадает с первой таблицей страницы, на которой вы находитесь, перезагрузите весь div с информацией этого URL-адреса, а затем выполните анимацию выделения.

Мой текущий код:

setInterval(function() {
$("#toparticles").load("http://myarticles/feed/of/top/articles", function()
{
$("#toparticles table:first").effect("highlight", {color:"#f2f37f"}, 1000);});
}, 20000);

Спасибо, если можете оказать какую-либо помощь.

Answer 1

Возможно, вы могли бы изменить свой запрос на использование jQuery.ajax (). У него есть опция "ifModified". Из документов:

ifModifiedBoolean По умолчанию: false

Разрешить выполнение запроса только в том случае, если ответ изменился с момента последнего запроса. Это делается путем проверки заголовка Last-Modified. Значением по умолчанию является false, игнорируя заголовок. В jQuery 1.4 этот метод также проверяет 'etag', указанный сервером, чтобы отловить неизмененные данные.

jQuery.ajax () документация

Кроме того, я не проверял себя, но кажется, что у них есть пример, который использует обратный вызов функции .load():

$("#success").load("/not-here.php", function(response, status, xhr) {
  if (status == "error") {
    var msg = "Sorry but there was an error: ";
    $("#error").html(msg + xhr.status + " " + xhr.statusText);
  }
});

Answer 2

Наивный подход ( лучше всего иметь какой-то идентификатор ):

setInterval(function() {
  var first_html = $("#toparticles table:first").text();
  $("#toparticles").load("http://myarticles/feed/of/top/articles", function()
   {
     if ( first_html == $("#toparticles table:first").text() )
     {
        $("#toparticles table:first").effect("highlight", {color:"#f2f37f"}, 1000);
     }
  });
}, 20000);

. Он хранит текст первой таблицы в переменнойперед вызовом ajax, а затем сравнивает его с новой первой таблицей.( я проверяю только текст, вы можете изменить его на .html(), чтобы проверить всю структуру html, если вы хотите, чтобы этот уровень детализации )