在Javascript中动画化算法

Question

我正在使用Raphael.js来显示凸包算法。 但是我希望能够遍历代码的不同部分（或者使用类似sleep（）/ delay（）的东西）。但是，我看不到使用setTimeOut（）完成此操作的方法。有任何想法吗？

例如：

sort(points);
//sleep(...)/delay(...)/pause until click?
for(...) {
   message('Foo thing');
   //sleep(...)/delay(...)/pause until click?
   while() {
      message('Comparing points');
      //sleep(...)/delay(...)/pause until click?
   }
}

Answer 1

在JavaScript中，无法使用sleep函数暂停代码执行。执行JavaScript代码旨在实现非阻塞。

使用debugger关键字的解决方案也适用于Chrome。您只需打开开发人员工具。

我准备了以不同方式工作的demo。它使用sleep模拟setInterval函数，并且不会阻止脚本执行。但是，它涉及一些额外的代码。

我们假设我们有初始代码：

var arr = [0, 1, 2, 3, 4];

function step(val) {
    console.log(val);
}

for (var i = 0, len = arr.length; i < len; i++) {
    step(arr[i]);
}

现在，我们想重写它，以便每秒后显示一个日志：

var arr = [0, 1, 2, 3, 4],
steps = [];

function step(val) {
  console.log(val);
}

for (var i = 0, len = arr.length; i < len; i++) {
  steps[i] = step.bind(null, arr[i]);
}

var int = setInterval(function() {
    var fun = steps.shift();
    if(!fun) {
        clearInterval(int); 
        return;
    }
    fun();
}, 1000);

让我解释一下。首先，我定义steps数组，其中我将新函数与绑定参数放在一起。 bind函数基本上创建了带有参数的新函数，这些参数绑定到提供的值。有关MDN page的更多详情。

示例：

function step(a) { console.log(a); }
var step1 = step.bind(null, 1);
// now step1 is like `var step1 = function() { console.log(1); }`

在for循环中，我使用bind创建并添加新函数。最后一步是从steps数组中提取这些函数，从头开始（使用Array.prototype.shift方法），并以等于1秒的间隔执行它们。

我知道这不是您问题的直接解决方案，但我希望它可以帮助您正确转换代码。如果您决定这样做，我建议将for和while循环中的代码块转换为函数。它简化了转换。

Answer 2

也许您可以等待按钮点击，然后当点击发生时您可以执行一行代码？

为按钮设置onclick监听器并设置变量continue = true; 在执行完一段代码之后，你想等待下一段代码运行，你可以使用。

//code just executed
while(continue == false) sleep(10);
continue = false;
//next code to be executed
while(continue == false) sleep(10);
continue = false;
//more code....

可能有一个比这更好的解决方案，所以不要把这个代码当作最好的，除非它是你唯一的答案。

Answer 3

您可以尝试使用浏览器上提供的调试工具。如果您使用chrome，请按Shift + Ctrl + I启用开发人员工具。如果您使用的是firefox，则可以下载安装firebug扩展。完成此操作后，您可以通过设置断点来逐步执行代码。这是通过放置'调试器'来完成的。您要开始单步执行的javascript点上的关键字。 E.g

sort(points);
debugger
for(...) {
  message('Foo thing');
  debugger;
  while() {
    message('Comparing points');
    debugger;
  }
}