Самый эффективный способ добавить / удалить в jQuery

Question

Идея состоит в том, чтобы создать индикатор выполнения, но с полными остановками ".".Так в div, "."добавляется каждые 500 мсек, что я хотел сделать, если длина div (то есть число ".") больше 3, начать удалять один "."за раз, затем, когда в 0, запустите процесс снова:

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

Answer 1

Я не думаю, что эффективность - это проблема здесь.

Однако есть несколько вещей, которые нужно исправить:

1. .val() работает только для ввода формы - для васхочу .text().
2. Полагаю, есть только один div с идентификатором 'load'.Если их больше, вместо идентификатора следует использовать класс, а если нет, то .each() не нужен.

Наконец, вот как я бы это сделал:

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);

Смотрите демонстрацию здесь: http://jsfiddle.net/Xp77Q/3/

Answer 2

То, как вы это делаете, очень неэффективно, потому что оно касается нескольких DOM-узлов при каждом изменении. Будет эффективнее хранить текущее значение прогресса в переменной и обновлять его одним $('#load').html(...) звонок.