使用异步子例程对一组函数进行计时

这里有两个方法，每个方法都做异步的事情。这里有一些关于这意味着什么的很好的堆栈溢出帖子。

易于理解的"异步事件"定义？

异步编程是否意味着多线程？

JavaScript 函数是异步的吗？

我们不知道异步调用需要多长时间才能完成。在您的情况下，AJAX 请求最多可能需要几秒钟，具体取决于网络速度，因此无论何时执行这些方法中的每一个，您都无法知道哪个方法将首先完成。那怎么办？通常，当您编写/使用异步方法（如 $.ajax）时，您会给它一个回调，该回调将在异步工作完成后执行。您已经以success回调的形式完成了此操作。这是个好消息。success回调是同步的（注意缺少的 a）。这意味着在请求完成时需要运行的success回调中的"有用代码"将在执行其他success回调中的"其他有用代码"之前完成（只要它都不是异步的）。无论哪个请求先完成，这都有效。每个success回调将始终等待另一个回调。所以我认为让你感到困惑的是你的调试语句。如果将以下语句添加到代码中，则执行流可能更有意义：

debugging = true;
var debug = function() {
  if (debugging) {
    console.log.apply(console, arguments)
  };
}
var allFruits = [];
var queue = [];
var getFruits = function() {
  debug("getFruits: make request");
  $.ajax({
    url: 'fruits.json',
    dataType: 'json',
    success: function(data) {
      debug("getFruits: start processing");
      allFruits = []; // Empty the list
      data.fruits.forEach(function(element) {
        allFruits.push(element.name);
      });
      debug('getFruits: finished processing');
    },
  });
  debug("getFruits: request sent, now we wait for a response.");
}
var checkFruits = function() {
  debug("checkFruits: make request");
  $.ajax({
    url: 'fruits.json',
    dataType: 'json',
    success: function(data) {
      debug("checkFruits: start processing");
      data.fruits.forEach(function(element) {
        if (allFruits.indexOf(element.name) === -1) {
          queue.push(['fruit', element.name]);
          allFruits.push(element.name);
        }
      });
      debug("checkFruits: finished processing");
    }
  });
  debug("checkFruits: request sent, now we wait for a response.");
}
getFruits();
setInterval(checkFruits, 5000);
// setInterval(getFruits, 10000); // When I try this, checkFruits() does not wait for getFruits() to finish.

经过思考，我相信事情可能没有按预期运行的唯一原因是因为您在回调之外清空了allFruits数组。如果你像我一样移动它，我认为一切都应该正常。

现在，我不知道为什么您需要重新初始化数据，因为每次发出请求时都会获得最新信息，但让我们继续前进。由于两种方法发出相同的请求，因此可以将其合并为单个方法。无需复制代码;)。由于您所有示例的getFruits运行速度都是checkFruits的两倍，因此我们可以轻松地添加一个计数器来完成相同的事件序列，如下所示：

    debugging = true;
    var debug = function() {
      if (debugging) {
        console.log.apply(console, arguments)
      };
    }
    var allFruits = [];
    var queue = [];
    var count = 0;
    var doOneThing = function(data) {
       //do stuff
    }
    
    var doAnotherThing= function(data) {
       //do other stuff
    }
    var requestFruits = function() {
      $.ajax({
        url: 'fruits.json',
        dataType: 'json',
        success: function(data) {
          // if count is even...or, do this every other time.
          if (count % 2 === 0) {
            count++;
            doOneThing(data);
          }
          // do this everytime
          doAnotherThing(data);
        },
      });
    }
    setInterval(requestFruits, 5000);

希望这有帮助。干杯。

您的最后一个代码示例首先执行 setInterval（functionA），当设置函数 A 的延迟执行时，执行 setInterval（functionB），这意味着 B 将在该行执行后 +- 5 秒调用，而函数 A 称为 +- 10 秒。

编辑以反映您的其他信息：

setInterval(function(){
   functionA();
   functionB();
}, 10000)
setTimeout(function(){
    setInterval(functionB, 10000)
}, 5000)

这是一个粗略的答案。我觉得回调可以实现这一点，但我不确定如何编码它们，尤其是涉及setInterval.

我创建了两个全局变量，getFruitsIsBusy = false 和 checkFruitsIsBusy = false 。我为 getFruits（） 和 checkFruits（） 创建了一个 IF。这是getFruits（）：

var getFruits = function() {
	if (checkFruitsIsBusy) { // New
		setTimeout(getFruits, 100); // New
		return; // New
	
	} else { // New
		getFruitsIsBusy = true // New
		
		allFruits = []; // Empty the list
		debug('getFruits() start:', 'allFruits =', allFruits, 'queue =', queue);
		$.ajax({
			url: 'fruits.json',
			dataType: 'json',
			success: function(data) {
				data.fruits.forEach(function(element) {
					allFruits.push(element.name);
				});
				getFruitsIsBusy = false // New; in the success function
				debug('getFruits() end:', 'data =', data, 'allFruits =', allFruits, 'queue =', queue)
			},
		});
	}
}

如果也对 checkFruits（） 使用此范例，似乎两个函数都将等待对方完成。

基于对两个函数（A 和 B）时序的分析，考虑以下解决方案（Chionglo，2016 年）：

1. 保留函数 A 和函数 B 的状态信息。每个函数的状态应在各自的函数中设置。

2. 为函数 A 和函数 B 中的每个函数创建一个包装函数。包装函数调用相应的函数，然后检查相应函数的状态。

   一个。签入包装函数 A：如果函数 A 已达到最终状态，则清除与包装函数 A 关联的间隔，并为包装函数 B 安排间隔。

   二.签入包装函数 B：如果函数 B 已达到其最终状态，则清除与包装函数 B 关联的间隔。

3. 要开始该过程，请为包装函数 A 安排一个间隔。

示例代码：

var ac = Math.round(4*Math.random())+4;
var bc = Math.round(6*Math.random())+6;
var ai;
var Astate = false;
var Bstate = false;
function A() {
  // Do your thing for A here.
  // The following changes the “state of A” and then determines if the final state has been reached.
  ac -= 1;
  if (ac<1) Astate = true;
  else Astate = false;
}
function B() {
  // Do your thing for B here.
  // The following changes the “state of B” and then determines if the final state has been reached.
  bc -= 1;
  if (bc<1) Bstate = true;
  else Bstate = false;
}
ai = setInterval("processA()", 1000);
function processA() {
  A();
  if (Astate) {
    clearInterval(ai);
    ai = setInterval("processB()", 500);
  }
}
function processB() {
  B();
  if (Bstate) {
    clearInterval(ai);
    ai = undefined;
  }
}

参考

Chionglo， J. F. （2016）.对一组函数进行计时的分析。可在 http://www.aespen.ca/AEnswers/1458200332.pdf 购买。