使用 jQuery，可以监视 DOM 元素并在每次对其执行某些操作时进行报告

Question

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

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

编辑：我目前正在到处添加数十个console.logs，并希望采用更简洁的方法。

Answer 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"]

您可以更改此设置以满足您的需求，甚至可以挂接到其他功能。

Answer 2

并非没有setInterval .

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

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

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

Answer 3

以下文章介绍了两种可能适用于您的情况的技术，即突变观察器和关键帧：

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

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