CODEWITHSUNDEEP
javascriptjquerysetinterval
igteraous
igteraous

Reputation: 117

Hide div refresh while using setInterval

I use setInterval to update a table every 5 seconds which works great except that it creates a "blinking" effect since the Div refreshes as if I pressed F5.

Is it possible to hide it with example fadeIn() function? I have tried but without any luck so far. Does anyone have any experience with this?

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)

Upvotes: 2

Views: 786

Answers (3)

bradyjg
bradyjg

Reputation: 1

There will always be some flicker (most of the time negligible) when content is updated. A way to reduce this even more is to have two tables and as soon as the background table is filled, then swap it to the front and continue exchanging the two views, but is probably unnecessary.

To minimize the flicker time in this case, I would suggest to move the .remove() function into the .done() in the line right before the .append(). Even though code acts fast, sometimes our eyes can see small delays.

This solution should make sure that the data is not being removed until the AJAX call has completed a return. I would also go one step further and check the response to make sure the call returned successfully just for robustness.

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)

Upvotes: 0

Mike
Mike

Reputation: 1327

One thing you can do is make all the changes in memory before issuing a DOM refresh (an expensive process). This can be done with the detach() event:

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)

More than likely, it wouldn't solve flickering. For that, a closer example would need to be given. Some of that could be the amount of painting to the screen, some might be the delay of the AJAX. You are removing and creating elements, so a "flicker" is expected -- this is also where a library like React, which uses a virtual DOM, would excel.

Upvotes: 0

Rkv88 - Kanyan
Rkv88 - Kanyan

Reputation: 1332

flickering happen because you update the content before the ajax call completes not after it

you can try this

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;
        });
}
  1. Also let the html response from server be without <tr></tr>

Upvotes: 1

Related Questions