Javascript同步事件问题

Question

关于一系列需要以定时方式运行的任务，我遇到了一个奇怪的问题。

if (str === "venuehours") {
weekCommencing = $('#weekCommencing').val();
venueId = $('#venueId').val();
if (weekCommencing !== '') {
setTimeout(function() {
$('#results-vhhours').addClass('show');
}, 2000);
setTimeout(function() {
$('#loaderModal').modal('hide');
}, 2200);
$("#results-content").load("/reportbuilder/VenueHours", {
weekCommencing: weekCommencing,
venueId: venueId
});
setTimeout(function() {
$('html, body').animate({
scrollTop: $('#results-vhhours').offset().top
}, 500, 'linear');
}, 2300);
} else {
setTimeout(function() {
$('#loaderModal').modal('hide');
}, 2200);
$('.rota-build-frm-er.error-msg').html('* Please select Week Commencing Date!');
}
}

在我们的开发服务器上，由于数据花费的时间似乎超过了setTimeout函数所允许的时间，因此上述问题会失败，因此序列无法正常工作。

作为原型构建的一部分，这些代码很快就组合在一起了，我们知道它需要重构才能持久。我们知道我们需要重新构造此代码，以允许load函数成为同步任务的中心，并考虑将实现promise作为一种解决方案，但不确定在下面的场景中我们将如何实现？

有人能给我们一个建议，让我们走上正确的道路吗？谢谢你的帮助！

Answer 1

如果我正确理解了你的问题，你有一系列需要按顺序执行的操作，但它们都是无序的。

考虑使用promise并通过promise链链接操作。请注意，我已经更改了超时值，因为它们现在只在上一个操作完成后执行。

if (str === "venuehours") {
weekCommencing = $('#weekCommencing').val();
venueId = $('#venueId').val();
if (weekCommencing !== '') {
var action = new Promise(function(resolve, reject) {
setTimeout(function() {
$('#results-vhhours').addClass('show');
resolve();
}, 2000);
});
action.then(function() {
return new Promise(function(resolve, reject) {
setTimeout(function() {
$('#loaderModal').modal('hide');
resolve();
}, 200);
});
}).then(function() {
return new Promise(function(resolve, reject) {
$("#results-content").load("/reportbuilder/VenueHours", {
weekCommencing: weekCommencing,
venueId: venueId
}, function() {
resolve();
});
});
}).then(function() {
setTimeout(function() {
$('html, body').animate({
scrollTop: $('#results-vhhours').offset().top
}, 500, 'linear');
}, 100);
});
} else {
setTimeout(function() {
$('#loaderModal').modal('hide');
}, 2200);
$('.rota-build-frm-er.error-msg').html('* Please select Week Commencing Date!');
}
}