2

非同期効果の紛らわしいチェーンを含むサイトで作業しています。多くの場合、エフェクトは停止する前に数回相互に実行/取り消しを行います。スパゲッティコードをフォローするのに非常に苦労しています。

コードが適用されている一連の効果を追跡できるように、DOM要素が操作されるたびに実行するようにコールバックを設定することは可能ですか？

編集：私は現在、どこにでも数十のconsole.logを追加しており、よりクリーンなアプローチを望んでいました。

4

3 に答える 3

1

なしではありませんsetInterval。

エフェクトを適用するコードに、何が変更されたかを記録させることもできます。

これは、データ属性を使用して行うことができます。

<div data-state="some state" ...

console.log(targetElement.getAttribute("data-state");
targetElement.setAttribute("data-state","changes");
MakeChanges(targetElement);
于 2012-12-04T21:06:39.120 に答える
1

次の記事では、あなたのケースで機能する可能性のある2つの手法、MutationObserversとKeyframesを紹介します。

http://www.backalleycoder.com/2012/08/06/css-selector-listeners/

各手法について、記事は関連するライブラリを指しています。

于 2012-12-04T21:21:27.290 に答える
1

1つのアプローチは、コアjQuery関数にフックして、必要な情報をログに記録することです。これは、私が乗っ取ったいくつかの関数、つまり非表示とアニメーション化に関する非常に大まかなコードです。

var log_for_functions = 'hide animate'.split(' '); 
$.each( log_for_functions , function(){ 
var function_name = this;
var original_function = $.fn[ original_function_name ]; // get a reference to old function name  

    $.fn[ function_name ] = function () {
        var r = original_function.apply(this, arguments); 
        console.log( function_name + ' called on element ', this );  
        return r;
    }

});

ここで、jqueryを使用して要素を非表示にする$('#test').hide()と、次の出力が得られます。

hide called on element [context: #test, selector: "#test"]

ニーズに合わせてこれを変更したり、他の機能に接続したりすることもできます。

于 2012-12-04T22:01:48.600 に答える