Question

我的应用程序中有几个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);

将这些链接起来以使用承诺链来使此代码紧凑而整洁是最好的方法吗？还是有另一种方法？

Answer 1

不确定这是否是您想要的。我创建了一个工厂，包装了您的逻辑，并在所有promise解决后触发了回调。让我知道您是否需要进一步的帮助！干杯！

select id, itemnumber,
       sum(case when datesold >= '2018-08-01' and datesold < '2018-09-01' then qty else 0 end) as qty_201808,
       sum(case when datesold >= '2018-08-01' and datesold < '2018-09-01' then price else 0 end) as price_201808,
       sum(case when datesold >= '2018-07-01' and datesold < '2018-08-01' then qty else 0 end) as qty_201807,
       sum(case when datesold >= '2018-07-01' and datesold < '2018-08-01' then price else 0 end) as price_201807
from itemorder
group by id, itemnumber
order by id, itemnumber;

* Promise.all在<= IE11中本身不受支持。

Answer 2

请注意，这并没有回答有关使用promise的确切问题，而是在您提出的有关使代码更紧凑，更整齐的问题内。您可以很轻松地将其重构为以下内容，使所有呼叫超时一个班轮：

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

如何使用Promise链接多个setTimeout函数？

2 个答案: