JQuery / JavaScript - проблемы синхронизации

Question

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

На самом деле, не так хорошо, как хотелось бы, check[i].id() появится только в консоли, когда я приостановлю консоль в цикле each.

В противном случае ничего не будет отображаться, а check будет undefined. Я не очень понимаю, в чем проблема, это первый раз, когда я сталкиваюсь с этой проблемой времени. Я задавался вопросом, произошла ли проблема из-за того, что мой AJAX-запрос был слишком медленным, но разве он не должен ждать вычисления перед заполнением check var?

Вот код, я немного изменил его для ясности:

var Form = function(formSelector, buttonsSelector) {
  var id;

  return {
    // Index of specific form
    setId: function(val) {
      (!isNaN(val)) ? id = val: console.log('Id must be integer')
    },
    id: function() {
      return id
    },

    // Get selectors
    formSelector: function() {
      return formSelector
    },
    buttonsSelector: function() {
      return buttonsSelector
    },

    // Get all DOM elements
    getAll: function() {
      return $(formSelector)
    },

    // Get id related elements
    get: function() {
      return $(this.getAll()).get(id)
    },
    buttons: function() {
      var buttons = $(this.get()).find(buttonsSelector);
      var elements = [];

      var proceed = $.ajax({
        url: 'myURL.php',
        dataType: 'json'
      }).done(function(data) {
        $(buttons).each(function(i) {
          if ((data.id()).includes($(buttons[i]).attr('id'))) {
            var element = new Buttons($(buttons[i]), data[i].id);

            elements.push(element);
          }
        });

        return true;
      });

      if (proceed) return elements;
    }
  }
}

$(function() {
  var test = new Form('.whatever', '.whatever2');
  var check = test.buttons();

  $(check).each(function(i) {
    console.log(check[i].id());
  });
});

Спасибо!

Answer 1

Например, принять обратный вызов в вашем методе buttons, как показано ниже

//.. rest class as is, only buttons method cahnges
buttons: function(callback) {
  var buttons = $(this.get()).find(buttonsSelector);
  var elements = [];

  var proceed = $.ajax({
    url: 'myURL.php',
    dataType: 'json'
  }).done(function(data) {
    $(buttons).each(function(i) {
      if ((data.id()).includes($(buttons[i]).attr('id'))) {
        var element = new Buttons($(buttons[i]), data[i].id);

        elements.push(element);
      }
    });

    if (callback) callback(elements);
    return true;
  });
}

Тогда вы можете сделать:

$(function() {
  var test = new Form('.whatever', '.whatever2');
  test.buttons(function(elements){
     $(elements).each(function(i) {
       console.log(elements[i].id());
     });
});

});

Ajax-вызов (и многие другие процессы в javascript) асинхронный , что означает, что он запускается в определенное время и заканчивается в другое время, в то время как выполнение НЕ приостанавливает ожидание это закончить, прежде чем перейти к следующему утверждению в потоке программы.

Это происходит по ряду причин, например, процесс должен запрашивать некоторые ресурсы, которые не доступны сразу, и так далее. Так что есть некоторая задержка в запуске процесса и возвращении результатов.

Чтобы НЕ БЛОКИРОВАТЬ текущий поток выполнения во время ожидания, процесс становится асинхронным , и выполнение продолжается (поэтому return не ожидает загрузки результатов но возвращает пустой массив).

Таким образом, необходим способ обратного вызова звонящего с результатами, когда он будет готов. По этой причине обратные вызовы и / или обещания используются для обработки этого типа асинхронного программирования. Обратный вызов НЕ приостанавливает выполнение, как вы могли подумать, вместо этого он вызывается, когда результаты готовы, поэтому исходный вызов вызывается через функцию обратного вызова с результатами, передаваемыми в качестве аргументов. Рассмотрим асинхронный JavaScript, обратные вызовы и обещания, чтобы понять, что это значит и как их использовать (см. Ссылку выше).