Почему waitForKeyElements() запускается только один раз, несмотря на последующие изменения?

Question

В течение нескольких лет я использовал функцию waitForKeyElements() для отслеживания изменений в веб-страницах из пользовательского текста. Однако иногда я обнаружил, что он не срабатывает, как ожидалось, и не работал. Я столкнулся с другим примером этой проблемы, и теперь я пытаюсь понять, в чем проблема. Ниже приведен самый яркий пример, который я могу создать.

Учитывая простой HTML-страницу, которая выглядит следующим образом:

<span class="e1">blah</span> 

и некоторые Javascript:

// function defined here https://gist.github.com/BrockA/2625891 
waitForKeyElements('.e1', handle_e1, false); 

function handle_e1(node) { 
    console.log(node.text()); 
    alert(node.text()); 
} 

setInterval(function() { 
    $('.e1').text("updated: "+Math.random()); 
}, 5000); 

Я бы ожидать, этот код, чтобы вызвать alert() и console.log() каждые 5 секунд. Однако он срабатывает только один раз. Есть идеи?

Адрес a codepen that demonstrates this.

Answer 1

По дизайну и по умолчанию waitForKeyElements обрабатывает узел только один раз. Чтобы он продолжал проверять, возвращает true из функции обратного вызова.
Вы также захотите сравнить строку (или что-то еще), чтобы увидеть, изменилась ли она.

Таким образом, в этом случае, handle_e1() будет что-то вроде:

function handle_e1 (jNode) { 
    var newTxt = jNode.text(); 
    if (typeof this.lastTxt === "undefined" || this.lastTxt !== newTxt) { 
     console.log (newTxt); 
     this.lastTxt = newTxt; 
    } 
    return true; // Allow repeat firings for this node. 
} 

---

---

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