Question

我正在迭代一组“.mini”类对象。对于每个对象，每个对象在移动（调用go函数）之前将等待500毫秒（setTimeout函数）。例如，

function iterate() {
    $(".mini").each(function(index)
    {
        var element = $(this);
        setTimeout(function() {go(element)}, 500);
    });
}

function go(element) {
    element.animate({left: "500px"},200);
}

然而，每个元素的动画都是同时发生的（所有32个.mini对象一次移动）而不是一个接着移动。怎么能让第一个从开始时间开始500秒后开始移动，第二个从开始时间开始1000之后开始等等？

Answer 1

您应该500多个index + 1，以便第一个发生在500ms，第二个发生在1000ms等。

setTimeout(function() {go(element)}, 500 * (index + 1));

现在，您迭代所有这些，并告诉每个人500ms from now, do this。所以，500ms从现在开始，他们每个人都会这样做。

Answer 2

使用Promise和reduce。等到上一个动画结束后再等待开始下一个动画。

如果您想等待开始初始动画，请将整个链接包裹在setTimeout()中。

Array.from(document.querySelectorAll("ul > li")).reduce((prev, curr) => {
  return prev.then(function() {
    return new Promise((resolve, reject) => {
      $(curr).animate({
        opacity: 0.2
      }, 1000, function() {
        resolve();
      });
    });
  });
}, Promise.resolve());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>Hello</li>
  <li>Hello</li>
  <li>Hello</li>
  <li>Hello</li>
  <li>Hello</li>
  <li>Hello</li>
</ul>

Answer 3

它们都同时发生，因为所有import matplotlib as mpl from mpl_toolkits.mplot3d import Axes3D import numpy as np import matplotlib.pyplot as plt mpl.rcParams['legend.fontsize'] = 10 fig = plt.figure() ax = fig.gca(projection='3d') v = 33 t = np.linspace(1,10,1) theta = np.pi/9 h = 2 # Prepare arrays x, y, z z = 1 x = v*t*np.cos(theta) y = -16*t**2 + v*t*np.sin(theta) + h ax.plot(x, y, z, label='parametric curve') ax.legend() plt.show()都在setTimeout内被调用，这不需要很长时间来循环元素列表（仅几毫秒）。如果你想链接它们，那么使用jQuery#animate的each回调来指示下一个动画开始：

complete

jQuery：动画同时发生，而不是与.each（）迭代背靠背

3 个答案: