Почему jQuery detach повышает эффективность?

Question

Почему jQuery detach повышает эффективность?

0

Для обработчика результата ajax:

$('.update-flight-status').on('click', function() {
  $.getJSON('/status', function(result) {
    var statusElements = $.map(result, function(status, index) {
      var listItem = $('<li></li>');
      $('<h3>'+status.name+'</h3>').appendTo(listItem);
      $('<p>'+status.status+'</p>').appendTo(listItem);
      return listItem;
    });
$('.status-list').html(statusElements); });

AND

$('.update-flight-status').on('click', function() {
  $.getJSON('/status', function(result) {
    var statusElements = $.map(result, function(status, index) {
      var listItem = $('<li></li>');
      $('<h3>'+status.name+'</h3>').appendTo(listItem);
      $('<p>'+status.status+'</p>').appendTo(listItem);
      return listItem;
    });
    $('.status-list').detach()
                  .html(statusElements)
                  .appendTo('.status');
  });
});

Почему второй пример, где используется "отсоединить", более эффективен, чем первый?

noooooooob 25 март 2014, в 02:53

Источник

1

Это? ........
Felix Kling 25 март 2014, в 01:08
0

@FelixKling Я делал урок от codeschool.com
noooooooob 25 март 2014, в 01:42

Теги:

javascript

jquery

2 ответа

0

Отсоединение полезно и эффективно только тогда, когда вам необходимо переместить местоположение элементов или предотвратить отображение 1000 предметов, когда можно увидеть только один за раз.

Ваш пример не делает эффект отладки эффективным, похоже, что элемент был установлен неправильно с самого начала.

Cyassin 24 март 2014, в 23:05

Ещё вопросы

rupps · Accepted Answer · 2014-03-24T23-42-00.000Z

jquery detach - это то же самое, что и remove, только для того, чтобы он сохранял jquery-специфические назначения для этого узла, через data или обработчики событий. Этот метод пригодится, когда вы планируете повторно присоединить узел к другой точке DOM.

В первой версии вы действительно не можете определить, является ли status-list дочерним по status, но в любом случае вы НЕ удаляете узел, поэтому такие вещи, как данные, обработчики событий, назначенные классы и т.д.... остаются.

Во второй версии вы удаляете status-list из DOM, затем изменяете его, а затем снова присоединяете. Я предполагаю, что в одном и том же месте (но там отсутствует код, это просто дикая догадка), я бы сказал, что это на самом деле SLOWER, чем в первом случае, потому что первый случай просто изменяет содержимое HTML, не беспокоясь о необходимости отсоединения/повторного подключения.

Случай, когда detach будет повышать эффективность, - это удаление этого узла, и он был сильно настроен, с добавленными классами, данными и т.д.... затем снова подключить его в другом месте, вместо удаления узла, воссоздания его, переназначения всего материала и т.д. И т.д.,