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不等待的原因加载结果，但返回空数组）。

因此，在准备好结果后，需要一种方法回叫呼叫者。因此，callbacks and/or promises用于处理这种类型的异步编程。回调不会像您想的那样暂停执行，而是在结果准备就绪时调用它，以便通过回调函数调用原始调用者，并将结果作为参数传递。拿一堆异步javascript，回调和Promise来了解它的含义和用法（请参见上面的链接）。

JQuery / JavaScript-计时问题

1 个答案: