在Javascript中加入延迟

Question

我需要为我的Javascript代码添加大约100毫秒的延迟,但我不想使用setTimeout该window对象的功能,我不想使用繁忙的循环.有没有人有什么建议？

Answer 1

不幸的是,这setTimeout()是唯一可靠的方式(不是唯一的方法,但唯一可靠的方法)暂停脚本的执行而不阻止UI.

它实际上并不难,而不是写这个:

var x = 1;

// Place mysterious code that blocks the thread for 100 ms.

x = x * 3 + 2;
var y = x / 2;

你用setTimeout()这种方式重写它:

var x = 1;
var y = null; // To keep under proper scope

setTimeout(function() {
    x = x * 3 + 2;
    y = x / 2;
}, 100);

我知道使用setTimeout()涉及更多的思考而不是理想的sleep()功能,但遗憾的是后者不存在.有许多变通方法可以尝试实现这些功能.一些使用繁忙的循环:

function sleep(milliseconds) {
  var start = new Date().getTime();
  for (var i = 0; i < 1e7; i++) {
    if ((new Date().getTime() - start) > milliseconds){
      break;
    }
  }
}

其他人使用XMLHttpRequest绑定服务器脚本,在返回结果之前会休眠一段时间.

不幸的是,这些是解决方法,可能会导致其他问题(如冻结浏览器).建议简单地坚持推荐的方式,即setTimeout()).

Answer 2

我刚才有一个问题,我需要妥善解决这个问题.

通过Ajax,脚本获取X(0-10)消息.我想做的事:每隔10秒向DOM添加一条消息.

我最终得到的代码:

$.each(messages, function(idx, el){
  window.setTimeout(function(){
    doSomething(el);
  },Math.floor(idx+1)*10000);
});

基本上,将超时视为脚本的"时间轴".

这就是我们想要编写的代码:

DoSomething();
WaitAndDoNothing(5000);
DoSomethingOther();
WaitAndDoNothing(5000);
DoEvenMore();

这就是我们如何告诉JAVASCRIPT:

At Runtime 0    : DoSomething();
At Runtime 5000 : DoSomethingOther();
At Runtime 10000: DoEvenMore();

希望这可以帮助.

Answer 3

如果您对ES2017没问题，那就await很好：

const DEF_DELAY = 1000;

function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms || DEF_DELAY));
}

await sleep(100);

请注意，该await部分需要处于异步函数中：

//IIAFE (immediately invoked async function expression)
(async()=>{
  //Do some stuff
  await sleep(100);
  //Do some more stuff
})()