Самый эффективный способ добавления/удаления в 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 с ID 'load'. Если их больше, вместо ID следует использовать класс, а если нет, то .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(...).