Question

I am using Raphael.js to visualize a convex hull algorithm.
However I want to be able to step through the different parts of the code (or use something like sleep()/delay()). However, I can’t see a way of accomplishing this using setTimeOut(). Any ideas?

For example:

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

In JavaScript there is no way to suspend code execution with sleep function. Executing JavaScript code is designed to be non-blocking.

Solution with using debugger keyword works on Chrome as well. You just have to open Developer Tools.

I prepared demo which works in different way. It simulates sleep function using setInterval and does not block scripts execution. However, it involves some additional code.

Let’s assume that we have initial code:

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

Now, we’d like to rewrite it so that each log shows after one second:

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

Let me explain it a little bit. Firstly, I define steps array, where I put new functions with bound arguments. bind function basically creates new function with arguments which are bound to provided values. More details on MDN page.

Example:

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

In for loop I create and put new functions using bind. The last step is to extract these functions from steps array, starting from beginning (using Array.prototype.shift method), and execute them with interval equal to 1 second.

I know it’s not a direct solution of your problem, but I hope it helps you convert your code properly. If you decide to do so, I advise to convert code blocks within for and while loops to functions. It simplifies conversion a little bit.