在 JavaScript 中创建 "run loop" 的最佳解决方案

Question

结果是，如果您希望您的应用程序响应外部/异步事件。

我的问题是，使用什么技术可以使 "run loop" 无限/恒定但仍然具有高性能并且不会阻塞事件循环。

我运行快速测试以查看 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

有没有一种方法可以实现与 JavaScript 中的 while 循环一样高效的 "infinite while loop"。 setImmediate 比 setTimeout 快得多，但仍然比基本的 while 循环慢很多。

Answer 1

如果您真的需要高性能循环，我会说 requestAnimationFrame()，它经过高度优化且非常易于使用。

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

Answer 2

您可以使用 async/await:

在 while 循环内屈服于事件循环

// 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 );

})();

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

要使用您的计时器进行演示：

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)
})();

Answer 3

像这样的东西会起作用：

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)
}

在 JavaScript 中创建 "run loop" 的最佳解决方案

Optimal solution to creating a "run loop" in JavaScript

javascript

event-loop