JQuery/JavaScript - 时间问题

Question

我创建了一个 class，我试图实例化它以查看它是否按照我想要的方式处理，并且它工作正常。

实际上，没有我想要的那么好，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 中的许多其他进程）是 异步的 ，这意味着在某个时间开始并在另一个时间结束, 而执行不会暂停等待它完成，然后再继续程序流中的下一条语句。

发生这种情况的原因有很多，例如进程需要查询一些不能立即使用的资源等等。因此，在启动流程和返回结果方面会有一些延迟。

为了在等待时NOT BLOCK当前执行线程，进程变为异步并继续执行（这就是为什么return 不等待加载结果而是 returns 空数组）。

因此需要一种方法来在准备就绪时回调调用者返回结果。因此 callbacks and/or promises 用于处理这种类型的异步编程。回调 不会像您想象的那样 暂停执行，而是在结果准备好时调用它，因此通过回调函数调用原始调用者并将结果作为参数传递。了解一下异步 javascript、回调和承诺，了解其含义以及如何使用它们（参见上文 link）。

JQuery/JavaScript - 时间问题

JQuery/JavaScript - Timing problems

javascript

jquery

timing