Question

结果是the while loop blocks the event loop in JavaScript，如果您希望应用程序响应外部/异步事件，这会阻止它成为创建运行循环的可行解决方案。

我的问题是，有哪些技术用于运行循环＆＃34;无限/恒定但仍具有高性能和不会阻止事件循环。

我进行了快速测试，以查看while，setTimeout(fn, 0)（浏览器）和setImmediate(fn)（node.js）的效果。

var x = 1000
var isNode = typeof window == 'undefined'

function a() {
  var start = (new Date()).getTime()
  var q = 0

  function next() {
    q++
    if (q < x) {
      if (isNode) {
        setImmediate(next)
      } else {
        setTimeout(next, 0)
      }
    } else {
      var end = (new Date).getTime()
      console.log('a', end - start)
    }
  }

  next()
}

function b() {
  var start = (new Date()).getTime()
  var q = 0

  while (q < x) {
    q++
  }

  var end = (new Date).getTime()
  console.log('b', end - start)
}

a()
b()

的node.js：

a = 20
b = 0

浏览器：

a = 5039
b = 0

没有办法做一个＆＃34;无限循环＆＃34;这与在JavaScript中执行while循环一样高效。 setImmediate比setTimeout快得多，但它仍比基本的while循环慢很多。

Answer 1

您可以使用async / await：

在while循环内输出事件循环

＆＃13;

// This can only be logged when the event loop
// is yielded to in the infinite loop below.
// So, it can only ever be logged between `#1` and `#2` being logged;
// it can sometimes occur more than once, or not at all between `#1` and `#2`
const interval = setInterval( _ => console.log( '#1.5' ), 0 );

(async _ => {

  // Using a for loop so this demo doesn't run forever.
  // Can use an infinite loop instead
  for ( let i = 0; i < 150; i++ ) { // while( true ) {

    console.log( '#1 About to yield, ' );
    await new Promise( resolve => setTimeout( _ => resolve(), 0 ) ); // yield
    console.log( '#2 Done yielding (other callbacks may have run)' );

  }

  clearInterval( interval );

})();

＆＃13;

在node.js中使用setImmediate而不是setTimeout。请勿使用process.nextTick。

使用计时器进行演示：

＆＃13;

var start = (new Date()).getTime()
var q = 0, x = 1000;

;(async _ => {
  while (q < x) {
    await new Promise( resolve => setTimeout( _ => resolve(), 0 ) );
    q++
  }

  var end = (new Date).getTime()
  console.log('a', end - start)
})();

＆＃13;

Answer 2

类似的事情会起作用：

var THRESHOLDCOUNT = 10000
var THRESHOLDTIME = 15

function loop(fn) {
  var start = Date.now()
  var changed = false
  var x = 0

  while (!changed) {
    while (x < THRESHOLDCOUNT) {
      x++
      fn()
    }

    var end = Date.now()
    changed = end - start > THRESHOLDTIME
  }

  // make room for external events.
  setImmediate(loop)
}

Answer 3

如果你真的需要一个高性能循环，我会说requestAnimationFrame()，它是高度优化的，非常容易使用。

https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame

创建＆＃34;运行循环的最佳解决方案＆＃34;在JavaScript中

3 个答案: