在每個DOM更改「完成」上觸發javascript事件

我知道這可以以某種方式處理，但截至目前，這給我一個真正的困難時間。我正在編寫一個腳本，並希望在DOM操作完成時觸發一些特定的功能。我無法修改/添加/刪除任何其他腳本（因爲它可能使用某個框架注入頁面）。該頁面正在使用ajax請求（未在jQuery中實現）來加載/修改內容。現在我想要在每個DOM修改完成後觸發一個事件。我目前的做法是在每個DOMSubtreeModified事件中觸發該函數。事情是這樣的在每個DOM更改「完成」上觸發javascript事件

$(document).bind('DOMSubtreeModified', doSomeStuff);

但是，這種方法的缺點是，讓說，AJAX負荷10個元素處於通話狀態，然後爲每個元素doSomeStuff被激發。這可以限制在第10個元素加載後纔開始燒製嗎？像重新設置$（document）.ready（）事件？所以每當DOM準備就緒時（在加載ajax內容之後），就會觸發$（document）.ready（）

來源

2013-10-26 whizzzkid

DOMSubtreeModified is deprecated http://stackoverflow.com/questions/6659662/why-is-the-domsubtreemodified-event-deprecated-in-dom-level-3，並有建議使用此代替http：//更新.html5rocks.com/2012/02/Detect-DOM-changes-with-Mutation-Observers – Bernhard

@Bernhard DOMSubtreeModified仍然適用於chrome，突變觀察者仍然可以告訴我文檔是否準備好了嗎？ – whizzzkid

在jQuery中，有一種方法ajaxComplete，它在每次完成AJAX調用後調用給定的函數。查看更多here。

我會建議使用jQuery或（如果這不是一個選項）分析此函數的源代碼，看看它是如何完成的。

來源

2013-10-26 11:32:29

我在實現這個過程中沒有成功。這是否只偵聽jQuery ajax請求？...因爲所關注的頁面不使用jQuery的ajax函數。 – whizzzkid

該文檔說'現在，使用任何jQuery方法創建Ajax請求'，所以是的，我認爲它只適用於jQuery請求。深入瞭解源代碼可能會有所幫助:) –

:(任何通用解決方案？ – whizzzkid

使用Mutation Observer，您可以監聽更改，並且如果事件被觸發，則文檔已更改。

MutationObserver = window.MutationObserver || window.WebKitMutationObserver; 

var observer = new MutationObserver(function(mutations, observer) { 
    // Add the actions to be done here if a changes on DOM happened 
    console.log(mutations, observer); 

}); 

// Register the element root you want to look for changes 
observer.observe(document, { 
    subtree: true, 
    attributes: true 
});

來源

2013-10-26 11:56:11 Bernhard

完全有效，但我不希望它在每個dom更改時都啓動。如何才能在dom變更完成？...像jQuery中的ajaxComplete但沒有jQuery ...聽所有內容加載... – whizzzkid

@whizzkid沒有所有的圓頂變化完成的事件。只有一次更改完成/發生時，此套裝纔會觀察。所以如果你需要一個監聽器完成未知數量的更改，你必須創建一個計數器或其他東西，並減少計數器直到觀察者回調中的0。如果它是0，則知道任何更改都已完成。但那不是一件好事，更好的回調導向架構更合理。 – Bernhard

可以像$（document）.ready（）那樣重新初始化以在再次準備好時再次觸發？ – whizzzkid

我知道我有點遲到了，但它聽起來像是你可能要抖你doSomeStuff功能。如果你不反對在Underscore.js上引入依賴，它有一個很好的debounce函數。

來源

2014-03-05 18:09:30

在每個DOM更改「完成」上觸發javascript事件

回答

相關問題