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

如果我正确理解了您的问题，则您需要按顺序执行一系列操作，但是这些操作顺序混乱。

请考虑使用promises并通过诺言链将行动链接起来。注意，我已经更改了超时值，因为它们现在仅在上一个操作完成后才执行。

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!');
  }
}

Javascript同步事件问题

1 个答案: