Question

我正在尝试在执行过程中暂停一个脚本，如何在不将其插入setTimeout的情况下完成此操作？问题是这只是一段代码，剩下的就是大了很多，把它粘在setTimeout中可能会让人感到困惑。

$.ajax({
    type: 'POST',
    url: rAction,
    data: rData,
    success: function(msg){

    // BEFORE PROCEEDING TO THE FOLLOWING CODE, WAIT 5 SECONDS
    wait(5000); //?

    $('h1').hide();

    $('#result').html(msg);
    $('#alertTxt').html($('#result .system-error-message').html());
    $('#alert').slideDown('fast');
    $('#regForm').slideUp('fast');
    $("html, body").animate({ scrollTop: 170 }, 600);
    $('#but_submit').show();
    $('#processing').hide();

});

Answer 1

...如何在不将其粘贴到setTimeout的情况下完成此操作？

您可以将web workers用于长期运行的复杂代码，而不想回退到浏览器。该代码不能直接修改DOM，但它可以将消息发送回主脚本，告诉主脚本要更改的内容。

在不支持网络工作者的浏览器上，你基本上别无选择，只能屈服（setTimeout及其表兄弟）。

你可以在网上找到各种网络工作者的例子，但是对于它的价值，这是我做的for another answer here，它只显示了计数到大量的进度。但概念是相同的：长时间运行的脚本与主JavaScript线程分开运行，并通过postMessage向其发布更新。

主要文件和脚本：

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Progress</title>
<style type="text/css">
body, html {
  height: 100%;
}
body {
    font-family: sans-serif;
}
</style>
</head>
<body>
<div id="progress"><em>(Click to start)</em></div>
<script>
(function() {
  var div = document.getElementById("progress");
  var counter = new Worker("counter.js");

  div.addEventListener("click", run);

  counter.addEventListener("message", function(event) {
    div.innerHTML = "Counter so far: " + event.data.counter;
  });

  function run() {
    div.removeEventListener("click", run);
    counter.postMessage({ max: 10000000 });
  }
})();
</script>
</body>
</html>

counter.js网络工作者脚本（它们总是单独的文件）：

self.addEventListener("message", function(event) {
  var max;
  var counter;

  max = event.data && event.data.max || 100000;
  for (counter = 0; counter < max; ++counter) {
    if (counter % 1000 === 0) {
      self.postMessage({counter: counter});
    }
  }
  self.postMessage({counter: counter});
});

Answer 2

将要延迟的代码放在另一个函数中，然后将该函数传递给setTimeout。这应该让你的“真实”代码保持整洁。

function handleResponse() {
  $('h1').hide();

  $('#result').html(msg);
  $('#alertTxt').html($('#result .system-error-message').html());
  $('#alert').slideDown('fast');
  $('#regForm').slideUp('fast');
  $("html, body").animate({ scrollTop: 170 }, 600);
  $('#but_submit').show();
  $('#processing').hide();
}

$.ajax({
  type: 'POST',
  url: rAction,
  data: rData,
  success: function(msg){

  // BEFORE PROCEEDING TO THE FOLLOWING CODE, WAIT 5 SECONDS
  setTimeout(function() {
    handleResponse(msg);
  }, 5000); 
});

Answer 3

为什么不把它放在一个函数中并使用setTimeout（func，5000）调用该函数？

暂停脚本执行

3 个答案: