javascript - 限制网页上连续执行 JavaScript 的最有效方法

Question

我想在页面上持续执行一段 JavaScript 代码，为它花费所有可用的 CPU 时间，但允许浏览器同时正常运行和响应。

如果我只是连续运行我的代码，它会卡住浏览器的 UI，并且浏览器开始提示。现在我将零超时传递给 setTimeout，然后它会执行一小部分工作并循环回 setTimeout。这有效，但似乎没有利用所有可用的 CPU。您可能会想到更好的方法吗？

更新:更具体地说，有问题的代码在 canvas 上连续渲染帧。这里的工作单元是一帧。我们的目标是尽可能大的帧速率。

Answer 1

可能您想要的是集中页面上发生的一切，并使用 requestAnimationFrame 完成所有绘制。所以基本上你会有一个看起来像这样的函数/类(你必须原谅我习惯了 Mootools 类的一些样式/语法错误，只是把它作为一个大纲)

var Main = function(){
   this.queue = [];
   this.actions = {};

   requestAnimationFrame(this.loop)
}

Main.prototype.loop = function(){
   while (this.queue.length){
       var action = this.queue.pop();
       this.executeAction(e);
   }

   //do you rendering here
   requestAnimationFrame(this.loop);
}

Main.prototype.addToQueue = function(e){
   this.queue.push(e);
}

Main.prototype.addAction = function(target, event, callback){
    if (this.actions[target] === void 0) this.actions[target] = {};
    if (this.actions[target][event] === void 0) this.actions[target][event] = [];

    this.actions[target][event].push(callback);
}

Main.prototype.executeAction = function(e){
    if (this.actions[e.target]!==void 0 && this.actions[e.target][e.type]!==void 0){
        for (var i=0; i<this.actions[e.target][e.type].length; i++){
            this.actions[e.target][e.type](e);
        }
    }
}

所以基本上您会使用此类来处理页面上发生的所有事情。每个事件处理程序都将是 onclick='Main.addToQueue(event)' 或者您想要将事件添加到您的页面，您只需将它们指向将事件添加到提示，然后使用 Main .addAction 将这些事件定向到您希望它们执行的任何操作。这样，一旦您的 Canvas 完成重绘并且在再次重绘之前，每个用户操作都会被执行。只要您的 Canvas 以合适的帧速率呈现，您的应用程序就应该保持响应。

编辑:忘记了 requestAnimationFrame(this.loop) 中的“this”