Question

我是否可以在Chrome扩展程序中生成一个AJAX请求，只有在页面上的所有其他AJAX请求完成后才能运行？我有一个修改页面元素的函数，但它只能在所有其他JS运行后才能正常运行。

现在，我正在使用$(document).click(func);调用我的函数，但我认为有更好的方法。

Answer 1

如果您可以预测哪些元素将被插入到页面中，您可以使用mutationObserver来监视您期望的所有更改，然后在发生所有更改时运行您的代码。

https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver

有些代码可能如下所示：

(function () {
    var expectedMutations = [...]; // put your expected mutations in here + some way to track if they have been seen

    // create an observer instance
    var observer = new MutationObserver(function(mutations) {
      mutations.forEach(function(mutation) {
        // if the mutation matches do something
      });
      if (all mutations matched) {
        // disconnect the observer
        observer.disconnect();
        // do AJAX call
      }
    });

    // configuration of the observer:
    var config = { attributes: true, childList: true, characterData: true };

    // pass in the target node, as well as the observer options
    observer.observe(document.body, config);
}());

请注意，这在旧版浏览器中不起作用，如果您需要支持旧浏览器，则会有较旧的突变观察API。这是支持它的列表

https://code.google.com/p/mutation-summary/wiki/DOMMutationObservers#Browser_Availability

这是基于事件监听器的旧API

https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Mutation_events

Answer 2

您可以查看async.js来控制您的流量： https://github.com/caolan/async

或者，如果你有可能实现像你这样的东西，你可以实现这样的东西：

var totalRequestCount = 10; // You may apply your own count here.
var executedRequestCount = 0;

并实现像这样的每个回调方法

var callback = function() {
  executedRequestCount ++;
  if (totalRequestsCount === executedRequestsCount) {
    // put the last request here
  }
};

P.S。我认为应该有其他方法来优化整个页面的生命周期。

控制AJAX请求的顺序

2 个答案: