CODEWITHSUNDEEP
jqueryperformanceappend
benhowdle89
benhowdle89

Reputation: 37494

Most efficient way to append/remove in jQuery

The idea is to create a progress bar but with full stops ".". So in the div, a "." gets appended every 500ms, what i wanted to do is, if the length of the div (ie. number of ".") is bigger than 3, start removing one "." at a time, then when at 0, start the process again:

            setInterval(function() {
                  $("#load").append(".");
                  var length;
                  $('#load').each(function(){  
                    length = $("#load").val().length;
                  });
                  if (length > 3){
                    $("#load").remove(".");
                  }
            }, 500);

Upvotes: 1

Views: 366

Answers (2)

David Tang
David Tang

Reputation: 93694

I don't think efficiency is a problem here.

There are a few things to fix though:

  1. .val() only works for form inputs - for divs you want .text().
  2. I presume there's only one div with ID 'load'. If there are more, a class should be used instead of an ID, and if not, the .each() is not needed.

Finally, this is how I would do it:

var count = 0, dots = '...';
setInterval(function () {
    var len = Math.abs(count++ % 6 - 3); // Gives only 3, 2, 1, 0, 1, 2, 3, ...
    $('#load').text(dots.substring(0, 3 - len));
}, 500);

See a demo here: http://jsfiddle.net/Xp77Q/3/

Upvotes: 3

Vadym
Vadym

Reputation: 5284

The way you're doing this is very inefficient because it touches multiple DOM-nodes on every change. It will be more efficient to keep current progress value in a variable and update it with single $('#load').html(...) call.

Upvotes: 0

Related Questions