Как убрать мерцание при использовании setInterval?

Question

[Triglav77]

Есть скрипт, все работает корректно, но div сильно мерцает
<div id="countries"></div>

setInterval(function(){ 	
				$('#countries').empty();
				$.getJSON('http://www..........com/objects/<?=$file_json[0]["object_files"];?>', function(data) {
					$.each(data, function(key, val) {	
						if(key=="success"){key="";}
						if(val==null){val="Успешный проход";}						
					$('#countries').append(key + val);
					$('#countries').append('<br>');
					});
				});
			}, 1000);

как можно убрать мерцание

Comments

[Владимир]

Было бы неплохо посмотреть на пример на https://codesandbox.io/ чего у вас там мерцает, ну и пакуйте изменения в DOM в одну операцию, они самые затратные.

Answer 1

[hzzzzl]

добавлять не 1000 элементов каждый раз, а собирать готовую одну строку, и добавлять ее

setInterval(function(){ 	
        $('#countries').empty();
        $.getJSON('http://www..........com/objects/<?=$file_json[0]["object_files"];?>', function(data) {
          let result = ''
          $.each(data, function(key, val) {	
             if(key=="success"){key="";}
             if(val==null){val="Успешный проход";}						
             result = result + key + val + '<br>';
          });
          $('#countries').append(result)
        });
      }, 1000);

Comments

[Triglav77]

какие 1000 элементов. Это 1000ms т.е. проверка файла кадую секунду

[hzzzzl]

Triglav77, это художественное преувеличение такое,
$.each(data, function(key, val) { ... }
здесь же в цикле по data много раз что-то добавляется?

[Triglav77]

hzzzzl, нет всего 2 переменные

[Владимир]

Triglav77, Изменения в DOM - самая затратная операция. пакуйте ее в одну.