每次在jQuery中改变DOM时，如何调用函数？ [英] How do I call a function every time the DOM changes in jQuery?

问题描述

我需要确保页面保持我的脚本描述的方式即使在DOM更改后;我的脚本必须处理对DOM的这些更改，这样我的脚本不仅处于初始状态。

是否有一个事件可以用来处理这些DOM更改？

解决方案

从最严格的意义上说，你的问题是这样的：

  // ---将容器缩小到AMAP。 
 $（你的选择器）。bind（DOMSubtreeModified，HandleDOM_ChangeWithDelay）; 
 
 var zGbl_DOM_ChangeTimer = null; 
 
 function HandleDOM_ChangeWithDelay（zEvent）{
 if（typeof zGbl_DOM_ChangeTimer ==number）{
 clearTimeout（zGbl_DOM_ChangeTimer）; 
 zGbl_DOM_ChangeTimer =''; 
} 
 zGbl_DOM_ChangeTimer = setTimeout（HandleDOM_Change，333）; 
} 
 
函数HandleDOM_Change（）{
 //你的代码在这里
} 
  

请注意，您需要中间延迟功能，因为更改将以您只需要在群集的最后一个事件上触发，这就是您关心的更改是在

---

---

重要信息：

自从我使用 DOMSubtreeModified 方法已经有一段时间了，因为它在实践中表现不佳。所以，我忘了我有一个效用函数。

另外，Raynos提醒， 突变事件已被弃用 。所以，Firefox可能会在以后的版本中停止支持这些事件。

另一个问题：如果您的脚本还会更改要监视的容器中的节点，则脚本可以获取陷入无限循环/递归中。

这是避免循环（和全局变量）的代码：

  function HandleDOM_Change（）{
 //你的代码在这里
} 
 
 // ---将容器缩小到AMAP。 
 fireOnDomChange（'你的JQUERY SELECTOR'，HandleDOM_Change，100）; 
 
函数fireOnDomChange（selector，actionFunction，delay）
 {
 $（selector）.bind（'DOMSubtreeModified'，fireOnDelay）; 
 
 function fireOnDelay（）{
 if（typeof this.Timer ==number）{
 clearTimeout（this.Timer）; 
} 
 this.Timer = setTimeout（function（）{fireActionFunction（）;}，
 delay？delay：333 
）; 
} 
 
 function fireActionFunction（）{
 $（selector）.unbind（'DOMSubtreeModified'，fireOnDelay）; 
 actionFunction（）; 
 $（selector）.bind（'DOMSubtreeModified'，fireOnDelay）; 
} 
} 
  

I need to ensure that a page stays the way my script describes even after the DOM changes; my script has to handle these changes to the DOM such that my script doesn't only handle on the initial state.

Is there an event that I can use to handle these DOM changes?

解决方案

Taking your question in the strictest sense, something like this:

//--- Narrow the container down AMAP.
$("YOUR SELECTOR").bind ("DOMSubtreeModified", HandleDOM_ChangeWithDelay);

var zGbl_DOM_ChangeTimer = null;

function HandleDOM_ChangeWithDelay (zEvent) {
    if (typeof zGbl_DOM_ChangeTimer == "number") {
        clearTimeout (zGbl_DOM_ChangeTimer);
        zGbl_DOM_ChangeTimer = '';
    }
    zGbl_DOM_ChangeTimer     = setTimeout (HandleDOM_Change, 333);
}

function HandleDOM_Change () {
    // YOUR CODE HERE.
}

Note that you want the intermediate delay function because the changes will come in clusters of 10 to 100's of events on a site like Youtube or Google.

You only want to fire on the last event of a cluster -- that's when the change you care about is finished.

---

---

IMPORTANT:

It's been a while since I've used the DOMSubtreeModified approach, because it performs poorly in practice. So, I forgot I had a utility function for it.

Also, as Raynos reminds, mutation events are deprecated. So, Firefox may stop supporting these events in some future release.

One other problem: If your script also changes the nodes in the container you are monitoring, the script can get stuck in an infinite loop/recursion.

Here is the code to avoid the loop (and that global variable):

function HandleDOM_Change () {
    // YOUR CODE HERE.
}

//--- Narrow the container down AMAP.
fireOnDomChange ('YOUR JQUERY SELECTOR', HandleDOM_Change, 100);

function fireOnDomChange (selector, actionFunction, delay)
{
    $(selector).bind ('DOMSubtreeModified', fireOnDelay);

    function fireOnDelay () {
        if (typeof this.Timer == "number") {
            clearTimeout (this.Timer);
        }
        this.Timer  = setTimeout (  function() { fireActionFunction (); },
                                    delay ? delay : 333
                                 );
    }

    function fireActionFunction () {
        $(selector).unbind ('DOMSubtreeModified', fireOnDelay);
        actionFunction ();
        $(selector).bind ('DOMSubtreeModified', fireOnDelay);
    }
}

这篇关于每次在jQuery中改变DOM时，如何调用函数？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！