使用 setInterval 时隐藏 div 刷新

Question

我使用 setInterval 每 5 秒更新一次 table，这很好用，除了它创建了一个“闪烁”效果，因为 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)

Answer 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>

Answer 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 的延迟。您正在删除和创建元素，因此需要 "flicker" —— 这也是像 React 这样使用虚拟 DOM 的库会 excel.

的地方

Answer 3

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

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

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

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)

使用 setInterval 时隐藏 div 刷新

Hide div refresh while using setInterval

javascript

jquery

setinterval