0

私はラズルソルバーであるjavascriptでコードを実行しようとしています。今のところ、迷路を掘り下げて、可能なすべてのパスを見つけるだけです (将来的には、それらを辞書と照合して、その中の実際の有効な単語を見つけます)

ここで見ることができます：http://178.239.177.105/ruzzle/

アルゴリズムがどのように機能するかを示すアニメーションでやりたかったのですが、問題が発生しています。ロードすると、ページに何も表示されず、しばらくするとブラウザがクラッシュします。

しかし...

再帰関数の途中で alert("") 関数を設定すると、アルゴリズムの任意のステップを実行できます。特に、これ以上警告メッセージを表示しないようにブラウザーを設定すると、最終的にアニメーションが迷路で動作することがわかります。

私は実際に setInterval() を介してこれを実行しようとしていましたが、機能していません。

そこで、2 つの質問があります。 - アラートが発生した場合、スクリプトによってページがクラッシュするのはなぜですか? - 何らかの種類の wait() メカニズムを使用してアニメーションを適切に表示するにはどうすればよいですか?

ありがとう

ページに移動してソースコードを見ると、すべてのコードを見ることができますが、わかりやすくするために、関連するコードをここに貼り付けます。

ここでコードを試すこともできます: http://jsfiddle.net/Gcw2U/ (実行するには、最後の行のコメントを外す必要があります)

        //this matrix of chars rapresent the 4x4 puzzle
          var ruzle_model = [["w","a","l","k"],["m","o","o","n"],["h","a","t","e"],["r","o","p","e"]];



        // ""offsets" rapresent the four motion vector(up,down,left,right)
        // used to visit the matrix
        var offsets = [[1,0],[0,1],[-1,0],[0,-1]];

//recursive function to dig the maze
            function path(m,i,j,paths,checkeds){
                alert("SET BROWSER TO AVOID NEXT ALERTS MSGs!");
                //base case, if not hitting a wall or already checked cell
                if ( ! (i<=3 && i>=0 && j>=0 && j<=3) || isChecked(checkeds,i,j)){
                    terminal.innerHTML = terminal.innerHTML + "-"+ paths;
                    uncheckAllCells();
                    return paths;
                    }

                //call path for every direction (up,down,left,right) stored in offsets
                var tmp = [];
                for (var c=0; c<offsets.length;++c){
                    var offset = offsets[c];
                    checkCells(i,j);
                    checkeds.push(new Array(i,j));
                    tmp.push(path(m,i+offset[0],j+offset[1],paths + m[i][j],copy(checkeds)));
                }

                return tmp;
            }


            //call path on every cell in the maze
            function ruzzle(r){
                var sol = []
                for(var i=0; i<4; ++i){
                    for(var j=0; j<4; ++j){
                        var checkeds = new Array();
                        sol.push(path(r,i,j,'',checkeds));
                    }
                }
                terminal.innerHTML = sol;
                return sol;
            }
4

1 に答える 1

0

JavaScript のループと再帰はページのレンダリングを阻害するため、alert. ユーザーが「アラート メッセージを表示しない」に設定した場合でも、アラートは、ページを更新する基礎となるイベントループに実行時間をもたらします。

可能な限り高速な (高 fps) アニメーションの場合は、 を使用しますrequestAnimationFrame()。

あなたの場合、setTimeout()最善の方法です。への再帰呼び出しにタイムアウトを設定しpathます。

function recursive(args) {
    // do stuff to args
    setTimeout(function () {
        recursive(args);
    }, 5);
}

例

于 2013-09-14T12:03:07.063 に答える