使用 setInterval 时隐藏 div 刷新答案

【问题标题】：Hide div refresh while using setInterval使用 setInterval 时隐藏 div 刷新
【发布时间】：2020-03-14 14:21:45
【问题描述】：

我使用 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)

【问题讨论】：

标签： javascript jquery setinterval

【解决方案1】：

闪烁发生是因为您在 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>

【讨论】：

嗨 Rkv88，我尝试了这两种解决方案，但不能完全让它们工作。第一个解决方案在 5 秒后删除所有数据。不幸的是，第二种解决方案仍然闪烁。
对于第二种解决方案，尝试在没有的情况下发送数据
检查答案我编辑了代码，还请添加html表格以获得清晰的图片
这似乎解决了，我从 $('#_change tr') 中删除了 tr 以避免重复，认为它现在很好用。谢谢！
为什么使用两个setInterval？ :-)

【解决方案2】：

您可以做的一件事是在发出 DOM 刷新之前在内存中进行所有更改（一个昂贵的过程）。这可以通过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 的库的优势所在。

【讨论】：

【解决方案3】：

更新内容时总会出现一些闪烁（大多数情况下可以忽略不计）。进一步减少这种情况的一种方法是拥有两个表，一旦背景表被填满，然后将其交换到前面并继续交换两个视图，但这可能是不必要的。

为了在这种情况下最大限度地减少闪烁时间，我建议将 .remove() 函数移到 .done() 中的 .append() 之前的行中。即使代码动作很快，有时我们的眼睛也能看到小的延迟。

此解决方案应确保在 AJAX 调用完成返回之前不会删除数据。我还会更进一步检查响应以确保调用成功返回只是为了稳健性。

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)

【讨论】：

检查右括号