用Javascript制作算法动画

我正在使用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?
   }
}

---

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

为按钮设置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....

---

可能还有比这更好的解决方案，所以不要认为这段代码是最好的，除非它是您唯一的答案。

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

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

---

在JavaScript中，无法使用

sleep

函数暂停代码执行。执行JavaScript代码的设计是非阻塞的

使用

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

我准备了一个演示，它以不同的方式工作。它使用
setInterval
模拟
sleep
函数，不阻止脚本执行。但是，它涉及一些附加代码

假设我们有初始代码：

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

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

我知道这不是您问题的直接解决方案，但我希望它能帮助您正确地转换代码。如果您决定这样做，我建议将
中的代码块转换为
和
，而
将循环转换为函数。它简化了一点转换。
没有更多关于
的解释，只需一步一步地浏览代码的不同部分，也没有看到您的代码，不幸的是，没有太多。您的意思是要寻找模态消息框，比如由
alert（）
创建的消息框吗？不，这是一个函数（我定义的）这将使用算法执行的步骤更新HTML元素。请参见上面的屏幕截图。您能提供一个示例吗？我不太清楚这个想法。javascript没有睡眠功能，所以那不行
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);

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