Каковы плюсы и минусы тайм-аутов по сравнению с обратным отсчетом при асинхронном вызове загрузки контента в JavaScript / jQuery

Question

На мой взгляд, я мог бы чрезмерно спроектировать рекурсивное решение.

Подождите 2 секунды для загрузки первого набора модулей:

function loadContents() {
  $('[data-content]:not(.loaded)').each( function() {
    $(this).load($(this).data('content'));
    $(this).addClass('loaded');
  });
}
loadContents();
setInterval(loadContents, 2000);

Когда весь первый набор модулей загружен, проверьте наличие новых модулей:

function loadContents() {
  var notLoaded = $('[data-content]:not(.loaded)'),
  notLoadedLength = notLoaded.length;
  notLoaded.each( function(i,element) {
    $(element).addClass('loaded');
    $(element).load($(element).data('content'), function() {
      // one more has been loaded
      notLoadedLength--;
      if (notLoadedLength == 0) {
        alert("countdown good");
        loadContents();
      }
    });
  });
}
loadContents();

Answer 1

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

Вы не указываете, что именно вы хотите делать, но если вы хотите загружать несколько вещей параллельно изнать, когда они все загружены, тогда вы можете просто сохранять какое-то состояние о том, сколько было загружено, и когда подсчет показывает, что они все загружены, вы будете знать, что все готово.

Если выЕсли вы хотите загрузить их последовательно, то вы можете просто загрузить следующий из каждого обработчика успеха.Вероятно, проще всего создать список вещей для загрузки и просто иметь общий обработчик успеха, который получает следующий в списке, запускает его загрузку и удаляет его из списка.Когда список оставшихся элементов для загрузки пуст, все готово.

Редактировать: Глядя дальше на свой код, похоже, что вы загружаете их все параллельно.Вы можете просто создать обработчик успеха для каждого загружаемого, добавить загруженный класс в этот обработчик успеха и посмотреть, сколько еще не завершено.Я бы предложил это:

function loadContents() {
  $('[data-content]:not(.loaded)').each( function() {
    var obj = $(this);  // save in local variable in function closure so we can reference it in the success handler
    obj.load(obj.data('content'), function() {
        obj.addClass('loaded');
        if ($('[data-content]:not(.loaded)').length == 0) {
            // all pieces of content are now loaded
        } else {
            // some pieces of content are still loading
        }
    });
  });
}
loadContents();

Редактировать 2: ОК, основываясь на ваших комментариях, теперь я понимаю проблему лучше.Я бы поместил loadContents на родительский элемент дерева DOM, а затем вызвал его для вновь загруженного содержимого из обработчика успеха.Это будет работать для бесконечных уровней, и это безопасно, потому что это когда-либо вызывает себя только один раз для любого данного родителя дерева DOM.Когда нет нового контента для загрузки, ему просто нечего делать, и он больше не вызывает себя.Вот что я бы порекомендовал:

function loadContents(root) {
  $('[data-content]:not(.loaded)', root).each( function() {
    var obj = $(this);  // save in local variable in function closure so we can reference it in the success handler
    obj.load(obj.data('content'), function() {
        obj.addClass('loaded');
        loadContents(obj);  // now load any contents from the newly loaded content
    });
  });
}
loadContents(document.body);   // start it off by looking in the whole DOM tree