Question

我仍在努力应对异步等待，并且常常最终会使用设置的超时来迅速解决问题。

我正在使用jquery get获取数据，并在.done();上调用buildSlideshow函数

构建幻灯片后，我想用另一个函数调用startSlideshow()函数。

我尝试了各种版本的async和await，但似乎无法解决，并且没有某种超时，幻灯片在完全构建之前就开始了，并且效果很时髦。

$.get('/data/backgrounds.json').done((data) => {
      bgData = data;
      buildSlideshow(bgData.find(findVenue));
    });
  function findVenue(page) {
    return page.page === currentPage;
}

function buildSlideshow(page) {
  page.bgs.forEach((bg) => {
    bgUrl = bg.url ? bg.url : '';
    venueName = bg.venue ? bg.venue : '';
    venueLocation = bg.cityState ? bg.cityState : '';
    caption = `${venueName}<br>${venueLocation}`;
    div = document.createElement('div');
    $(div).append(caption);
    $(div).css('background-image', `linear-gradient(180deg, rgba(8, 0, 14, 0.3) 0%, rgba(8, 0, 14, 0) 100%), url(${bgUrl})`);
    $('#bgSlideshow').append(div);
  });
}

function startSlideshow() {
  $('#bgSlideshow > div:gt(0)').hide();

  setInterval(() => {
    $('#bgSlideshow > div:first')
      .fadeOut(2000)
      .next()
      .fadeIn(2000)
      .end()
      .appendTo('#bgSlideshow');
  }, 8000);
}
// doesn't work
startSlideshow();

// does work
setTimeout(() => {
  startSlideshow();
}, 300);

Answer 1

在这里剥离不重要的内容基本上是这样的：

$.get('/data/backgrounds.json').done((data) => {
  buildSlideshow(data.find(findVenue));
});

startSlideshow();

这里发生的是：

您请求数据，并在完成提取后提供回调以运行。
您开始幻灯片放映。
有时，对数据的请求会解决并触发您的回调。

您只需要将对startSlideshow的调用移到构建幻灯片的回调中，因为只有在构建幻灯片后才能启动它。

$.get('/data/backgrounds.json').done((data) => {
  buildSlideshow(data.find(findVenue));
  startSlideshow();
});

将setTimeout转换为异步真棒吗？

1 个答案: