时间戳

首页 > 解决方案 > JQuery/JavaScript - 时间问题

javascript - JQuery/JavaScript - 时间问题

问题描述

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

实际上，没有我想的那么好，只有当我在循环中check[i].id()暂停控制台时才会出现在控制台中。each

否则，什么都不会炫耀，而且check会是undefined。我不太明白问题出在哪里，这是我第一次遇到这个时间问题。我想知道问题是否来自我的 AJAX 请求太慢，但它不应该在填充checkvar 之前等待计算吗？

这是代码，为了清楚起见，我对其进行了一些修改：

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());
  });
});

谢谢！

标签： javascriptjquerytiming

解决方案

例如，在您的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不等待加载结果而是返回空数组的原因）。

So a way is needed to call-back the caller with the results when ready. For this reason callbacks and/or promises are used to handle this type of asynhronous programming. The callback DOES NOT pause execution like you might think, instead it is called when results are ready so the original caller is called through the callback function with the results passed as arguments. Take a toor of asynhronous javascript, callbacks and promises to get an idea of what it means and how to use them (see link above).

推荐阅读