0

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

算法结果的屏幕截图。 红色点表示凸包的一个元素。

4

3 回答 3

1

在 JavaScript 中，无法使用sleep函数暂停代码执行。执行 JavaScript 代码被设计为非阻塞的。

使用debugger关键字的解决方案也适用于 Chrome。你只需要打开开发者工具。

我准备了以不同方式工作的演示。它使用模拟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数组，在其中放置带有绑定参数的新函数。bindfunction 基本上使用绑定到提供的值的参数创建新函数。MDN 页面上的更多详细信息。

例子：

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循环转换为函数。它稍微简化了转换。

于 2012-11-23T22:42:12.227 回答
0

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

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

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

于 2012-11-23T18:49:35.703 回答
0

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

sort(points);
debugger
for(...) {
  message('Foo thing');
  debugger;
  while() {
    message('Comparing points');
    debugger;
  }
}
于 2012-11-23T18:56:57.513 回答