Скрыть div refre sh при использовании setInterval - PullRequest
Новая
       7

Скрыть div refre sh при использовании setInterval

2 голосов
/ 14 марта 2020

Я использую setInterval для обновления таблицы каждые 5 секунд, что прекрасно работает, за исключением того, что она создает эффект " мигает ", так как Div обновляется, как будто я нажал F5 .

Можно ли это скрыть с помощью примера fadeIn()? Я пытался, но безуспешно. У кого-нибудь есть опыт с этим? 

var append_increment = 0;
setInterval(function() {
  $("#_change tr").remove();
  $.ajax({
      type: "GET",
      url: "{% url 'tables' %}",
      data: {
        ' tables ': append_increment
      }
    })
    .done(function(response) {
      $('#_change').append(response).fadeIn("milliseconds", "linear");

      append_increment += 0;
    });
}, 5000)

Ответы [ 3 ]

1 голос
/ 14 марта 2020

мерцание происходит, потому что вы обновляете контент до того, как вызов ajax завершится, а не после него

, вы можете попробовать это 

var append_increment = 0;
var Di = setInterval("clearInterval(Di);GetData();", 5000);
        function GetData(){
$.ajax({
            type: "GET",
            url: "{% url 'tables' %}",
            data: {' tables ': append_increment}
        })
        .done(function(response) {
            $('#_change tr').html(response).fadeIn(500, "linear");
            Di=setInterval("clearInterval(Di);GetData();",5000);
            append_increment += 0;
        });
}
Также пусть ответ html от сервера будет без <tr></tr>
0 голосов
/ 14 марта 2020

При обновлении контента всегда будет какое-то мерцание (в большинстве случаев незначительное). Чтобы уменьшить это еще больше, нужно иметь две таблицы и, как только фоновая таблица заполнится, затем поменять ее на передний план и продолжить обмен двумя представлениями, но, вероятно, в этом нет необходимости.

Чтобы свести к минимуму мерцание В этом случае я бы предложил переместить функцию .remove () в .done () в строке прямо перед .append (). Даже несмотря на то, что код работает быстро, иногда наши глаза видят небольшие задержки.

Это решение должно гарантировать, что данные не удаляются до тех пор, пока вызов AJAX не завершит возврат. Я также go сделал бы еще один шаг и проверил ответ, чтобы убедиться, что вызов успешно возвращен только для надежности. 

var append_increment = 0;
setInterval(function() {
  $.ajax({
      type: "GET",
      url: "{% url 'tables' %}",
      data: {
        ' tables ': append_increment
      }
    })
    .done(function(response) {
      if (/* response['statusCode'] == 200 */) {
        $("#_change tr").remove();
        $('#_change').append(response);
        append_increment += 0;
      }
    });
}, 5000)
0 голосов
/ 14 марта 2020

Одна вещь, которую вы можете сделать, это внести все изменения в память перед выдачей DOM refre sh (дорогостоящий процесс). Это можно сделать с помощью события detach(): 

var append_increment = 0;
setInterval(function() {
  $.ajax({
      type: "GET",
      url: "{% url 'tables' %}",
      data: {
        ' tables ': append_increment
      }
    })
    .done(function(response) {
      let $table = $('#_change')
      let $parent = $table.parent()
      $table.detatch()
      $table.find('tr').remove();
      $table.append(response);
      $parent.append($table);

      append_increment += 0;
    });
}, 5000)

Скорее всего, это не решит мерцание. Для этого нужно привести более близкий пример. Отчасти это может быть количество рисования на экране, а может быть задержка AJAX. Вы удаляете и создаете элементы, поэтому ожидается «мерцание» - и в этом случае библиотека, подобная React, которая использует виртуальный DOM, будет лучше.

...