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コードの実行は、非ブロッキングになるように設計されています。

キーワードを使用した解決策はdebuggerChromeでも機能します。開発者ツールを開くだけです。

動作の異なるデモを用意しました。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]);
}

ここで、各ログが1秒後に表示されるように書き直します。

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

たぶん、ボタンのクリックを待ってから、クリックが発生したときに1行のコードをステップインできますか？

ボタンの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 に答える