Javascript 如何使用承诺链接多个setTimeout函数？

我的应用程序中有几个setTimeout函数在不同的时间被调用（有些函数在页面加载后同时被调用）

我试图找出一种压缩和增强这段代码的方法。下面是我调用的3个setTimeout函数的示例，事实上，我的应用程序中还有很多函数：

  setTimeout(function () {
    $('.itemOne').css({
      'visibility': 'visible'
    }).addClass('animated slideInRight animate-duration-100');
  }, 1000);

  setTimeout(function () {
    $('.itemTwo').css({
      'background-color': 'rgba(0, 27, 53, 0.8)',
    });
  }, 1200);

  setTimeout(function () {
    $('.itemThree').css({
      'background-color': 'rgba(136, 211, 192, 0.25)',
    });
  }, 1200);

---

链接这些代码的最佳方法是使用承诺链使代码紧凑和整洁吗？或者还有其他方法吗？

请注意，这并没有回答关于使用承诺的确切问题，但在问题的内部，您提出了关于使代码更加紧凑和整洁的问题。您可以很容易地将其重构为以下内容，使所有调用超时一行程序：

function applyCssWithTimeout($target, cssToApply, timeout, classesToAdd) {
  setTimeout(function() { 
    $target.css(cssToApply).addClass(classesToAdd);
  }, timeout);
}

applyCssWithTimeout($('.itemOne'), { 'visibility': 'visible' }, 1000, 'animated slideInRight animate-duration-100');
applyCssWithTimeout($('.itemTwo'), { 'background-color': 'rgba(0, 27, 53, 0.8)' }, 1200);
applyCssWithTimeout($('.itemThree'), { 'background-color': 'rgba(136, 211, 192, 0.25)' }, 1200);

---

不确定这是否是你想要的。我创建了一个工厂，将您的逻辑包装在一起，并在所有承诺解决后触发回调。如果您需要进一步帮助，请告诉我！干杯

function createCssPromise($target, styleObj, timeout) {
  const { newStyle, newClass } = styleObj;

  return new Promise((resolve) => {
    setTimeout(() => {
      if (newStyle) {
        $target.css(newStyle); 
      }
      if (newClass) {
        $target.addClass(newClass);
      }

      resolve();
     }, timeout);
  });
}

const targetObj = $('.itemOne');
const styleObj = { 
  newStyle: { 'visibility': 'visible'}, 
  newClass: 'animated slideInRight animate-duration-100', 
}; 
const timeout = 1000;

const firstPromise = new createCssPromise(targetObj, styleObj, timeout);
const secondPromise... //follow the pattern
const thirdPromise...  // follow the pattern

Promise.all([firstPromise, secondPromise, thirdPromise]
  .then(() => console.log('done!'));

---

*中不支持在多个元素上链接动画的Promise.all。我建议您构建自己的队列：