AJAX - コンテンツを置換する際の要素/クラス/タイマーのクリーンアップ

Question

多くの開発者がAJAXを使用してデータとHTMLを取得するWebベースのアプリケーションを作成しています。

私はウェブ開発とjavascriptが初めてですが、他の言語のプログラミングで数十年の経験があります。

私はmootoolsを使用していますが、これは素晴らしいフレームワークですが、javascriptのデストラクタが不足していたり​​、dom要素のonDestroys/unloadさえ苦労しています。

私はたくさんのUIクラスを書いています（主に習得するため）、setIntervalタイマーを使用して定期的にWebServerからデータを取得し、ページの要素（主にカメラの画像）を更新します。

メニューで別のページがリクエストされ、コンテンツdivが新しいHTMLとJavascript（Request.HTMLを使用）で再読み込みされると、ほとんどの問題が発生します。この単純な方法は、すでにdiv内のすべての要素を新しいものに置き換え、新しいスクリプトを実行します。作成された古いスクリプトまたは古いオブジェクトのタイマーは、引き続き実行されます。これは、多くの孤立したClases、要素、タイマーを私に残していました。

私はmootoolsサイトでさらに多くのことを読んできました。私が作ってきた多くの間違いを認識し、問題の多くを修正し始めました。そのうちの最大のものは、クラスを要素に直接リンクするのではなく、Element.storeとElement.retrieveを使用しないことでした。

私は既に、リクエストされたHTMLを呼び出す前にすべての子要素でdestroyを呼び出すことによって、リロードされるdivの内容を解放する必要があることを発見しましたが、実行中のタイマーは削除されません。

ので、私は正常に動作し、その表示されしようとしたが、次のしてきたかを示すためにdeinitialize classesここJSFiddleをやったし、私が知りたいことは、

• は、それは良いアイデアはありますか？
• 私が逃したかもしれない他の問題はありますか？
• このタイプの実装で問題が発生することはありますか？
• または私はホイールを再発明して逃した 何か？

説明

クラスが初期化されると、それは要素で自身を格納します。

また、要素とともに格納されているAssocClasses配列に自身を追加します（必要に応じて作成します）。

私は、要素の内容がAJAX呼び出しやその他のメソッドに置き換えられるたびに呼び出されるClearElement関数を作成しました。これはdiv内のすべての要素を取得し、AssocClasses配列が接続されている場合に呼び出されます。配列内の各クラスを初期化解除すると、要素/記憶域を解放するために直接の各子のdestroyが呼び出されます。

すべての情報、ポインタなどが最もうまくいくでしょう。

Answer 1

Most issue occur when another page is requested with the menu and the content div is reloaded with new HTML and Javascript (using Request.HTML). This simple replaces all the elements already in the div with the new one and runs the new scripts. Any timers in the old scripts or old objects created will continue to run. This was leaving me with lots of orphaned Clases, elements and timers. 

ajax呼び出しでは、タイマーの記憶域とevalScriptsの使用について再考します。

これらはAJAXリクエストの外に保管してください。ピアコードレビューを行うときに、私はこれらが必要とされ、より良いやり方で実行できる例がほとんど見られませんでした。クリックされたリンク上でたぶん

は、さらに助言するのは難しいだろう、あなたの正確なコードを見ることなく完全またはするonSuccess

にコールバック関数をトリガしています。