В чем разница между использованием `waitForKeyElements` и JQuery` .on () `?

Question

В чем разница между использованием waitForKeyElements и JQuery .on()?

, как в адаптированном примере ниже, от { ссылка }

// ==UserScript==
// @name     _delete Adblock blocking nodes
// @match    *://YOUR_SERVER.COM/YOUR_PATH/*
// @require  https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js
// @require  https://gist.github.com/raw/2625891/waitForKeyElements.js
// @grant    GM_addStyle
// @grant    GM.getValue
// ==/UserScript==
//- The @grant directives are needed to restore the proper sandbox.
/* global $, waitForKeyElements */

waitForKeyElements ("[id$='adblockinfo']", killNode);

function killNode (elem) {
    elem.remove();
}

но я обычно делаю что-то вроде

// ==UserScript==
// @name     _delete Adblock blocking nodes
// @match    *://YOUR_SERVER.COM/YOUR_PATH/*
// @require  https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js
// @require  https://gist.github.com/raw/2625891/waitForKeyElements.js
// @grant    GM_addStyle
// @grant    GM.getValue
// ==/UserScript==
//- The @grant directives are needed to restore the proper sandbox.
/* global $, waitForKeyElements */

elem = $('#killme')

$(document).on('load ready', elem, function() {
    $(this).remove();
});

, учитывая опыт автора ({ ссылка }) в javascript, он, конечно, знает, что делает.
но я все же хотел бы узнать о различиях между этими двумя методами.

---

Учитывая имя и использование, waitForKeyElements будет ... хорошо ... ждать (и продолжать ждать ), пока эти элементы не будут доступны. В то время как ваш do c .on (готово) может быть легко обойден с помощью setTimeout или ajax load. Кроме того, waitForKeyElements опрашивает DOM для элементов (каждые 300 мс от источника), в то время как .on (load) срабатывает немедленно. - freedomn-m

Не стесняйтесь меня поправить по этому поводу:
я мог бы имитировать c это поведение, просто удалив селектор, так что весь документ и его потомки будут отслеживаться.

как в

elem = $('#killme')

$(document).on('load ready', function() {
    elem.remove();
});

это то, что я понял из https://api.jquery.com/on/

Если селектор опущен или равен нулю, событие обработчик упоминается как прямой или напрямую связанный. Обработчик вызывается каждый раз, когда происходит событие на выбранных элементах, независимо от того, происходит ли оно непосредственно на элементе или всплывает из дочернего (внутреннего) элемента.

Answer 1

Если вы посмотрите на источник waitForKeyElements, вы увидите, как он работает.

Проще говоря, он помещает функцию обратного вызова в setInterval(), которая выполняется каждые 300 мс. В этом интервале он проверяет DOM, чтобы увидеть, существует ли указанный вами селектор. Когда элемент создан, он выполняет ваш обратный вызов.

Этот метод отличается от jQuery on() метода, поскольку он предназначен для привязки к событиям , которые возникают из элементов, которые динамически создано. Он ничего не делает, когда фактически создается новый элемент.

Что касается реализации waitForKeyElements, он далек от идеального решения по ряду причин, не в последнюю очередь из которых является производительность. Если вам нужно знать, когда был создан динамический c элемент, используйте вместо него MutationObserver .

Answer 2

@ Kevin B

«load» запускается только тогда, когда элементы, которым есть что загрузить, заканчиваются sh, загружая что-то. Например, изображения, фреймы и окно. «ready» ожидает только DOMReady, есть только один DOMReady, это не то, что имеют отдельные элементы. jQuery буквально не имеет функциональности, которая соответствовала бы тому, что делает данный код. - Кевин B

загружает даже элементы, которые больше не являются документами или img? - Рори МакКроссан

может ... если это сработает так, что это заставит их пузыриться. но по умолчанию нет - Кевин B

Превратите их в ответы, если вы sh, я больше не выкладываю здесь реальные ответы. - Кевин Б

Answer 3

@ freedomn-m

Учитывая имя и использование, waitForKeyElements будет ... хорошо ... ждать (и продолжать ждать), пока эти элементы не станут доступны. В то время как ваш do c .on (готово) может быть легко обойден с помощью setTimeout или ajax load. Кроме того, waitForKeyElements опрашивает DOM для элементов (каждые 300 мс от источника), в то время как .on (load) срабатывает немедленно. - freedomn-m

добавление HTML элементов dom не вызывает событий load / ready. $ ("# mydiv"). append ("") не будет запускать загрузку / готовность, но waitforkeyelements найдет #newdiv при следующем опросе. - freedomn-m

Согласно ответу @ Рори - waitForKeyElements - это (упрощенно c) замена для MutationObserver, а не для события загрузки / готовности. - свобода-м