javascript - 使用 jQuery，是否可以观察 DOM 元素并在每次对其进行操作时进行报告？

Question

我正在一个包含令人困惑的异步效果链的站点上工作。通常，效果会在停止之前多次相互执行/撤消。我很难遵循意大利面条代码。

是否可以设置回调以在任何时候操作 DOM 元素时运行，以便我可以跟踪代码应用到它的效果链？

编辑：我目前正在到处添加数十个 console.logs 并想要一种更清洁的方法。

Answer 1

以下文章介绍了两种可能适用于您的情况的技术，Mutation Observers 和 Keyframes：

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

对于每种技术，文章都指向相关的库。

Answer 2

不是没有setInterval。

您可以让应用效果的代码也记录更改的内容。

您可以使用数据属性执行此操作。

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

console.log(targetElement.getAttribute("data-state");
targetElement.setAttribute("data-state","changes");
MakeChanges(targetElement);

Answer 3

一种方法是连接到核心 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"]

您可以更改它以满足您的需求，甚至可以连接到其他功能。