JS setTimeout() 替代方案

Question

就像我解释的那样 here ，我不能再使用 window.setTimeout() 和任何 window 经典函数，如 clearInterval 等 ...);但我需要调用 JS 块代码作为异步代码。

这就是我使用 XHR 请求的原因。

使用 XHR 实现 window.setTimeout() 的智能替代方案的最佳方法是什么？

// Not working :(
setTimeout(function(){ 
  document.getElementById("messageTimer").innerHTML = "Happy New Year ! (old version)";
}, 10);

// with or without jQuery - but XHR
jQuery.ajax({
    url: "/local/url/easy",
    success: function(html, textStatus, jqXHR) {
            // a loop ?
            // timeout done ?
            document.getElementById("messageTimer").innerHTML = "Happy New Year ! (working version)"
 }});

我的 fiddle 测试：https://jsfiddle.net/mlefree/xzh3w2we/

感谢

Answer 1

尝试使用 jQuery version 3.0 .animate()，现在使用 requestAnimationFrame

  // Creates a jQ object where elem set to index of [0]
  // a plain object with value of 0 `{to:0}`
  // call .animate() chained to the jQ object
  // Animates `{to:0}` value from 0 - 1
  // $({to:0}).animate({to:1}

var duration = 5000;
$({to:0}).animate({to:1}, duration, function() {
  // do stuff after `duration` elapsed
  $("#messageTimer").html("Happy New Year ! (working version)")
})

<script src="https://code.jquery.com/jquery-3.0.0-beta1.min.js"></script>
<div id="messageTimer"></div>

Answer 2

这样的事情怎么样？

var delay = 10000; // milliseconds
var before = Date.now());

while (Date.now() < before + delay) {};

alert('The delay has passed!');

此外，您可能对 Promise 对象感兴趣。这可能会给你这样的感觉：

var customDelay = new Promise(function(resolve) {
  var delay = 10000; // milliseconds
  var before = Date.now();
  while (Date.now() < before + delay) {};
  resolve('Success!');
});

customDelay.then(function(msg) {
  document.getElementById("messageTimer").innerHTML = "Happy New Year !';
});

---编辑--- Promise 对象是 ECMAScript 6 的一部分，因此会有向后兼容性问题。

幸运的是，jQuery 确实有自己的 Promises 实现！ Introduction to jQuery Promises

查看此页面以获取文档。实施将是相似的。

JS setTimeout() 替代方案

JS setTimeout() alternative

javascript

xmlhttprequest

settimeout