Javascript Подождите, пока не появится текст

Question

Как подождать, пока не появится какой-либо текст на странице? Я использую это, но он не работает:

function waitText() { 
    if (document.getElementsByTagName('p')[0].innerHTML == "Some Text"){ 
     alert("text appears"); 
    }else{ 
     setTimeout(function() { waitText() }, 1000); 
} 
} 

Answer 1

Есть несколько проблем с вашим кодом,

• Во-первых, мы не хотим, чтобы повторно установить интервалы - это вызовет каскад и в конечном счете заморозить нить, которая не является забавой
• Во-вторых, getElementByTagName не является методом на document. Вы должны либо индексировать в пункт 0 результата document.getElementsByTagName или использовать какой-то другой поиск, таких как document.querySelector

Так пример того, как вы могли бы сделать это следующим образом

function waitForText(element, text, callback, freq) { 
    if (!element || !callback || typeof text !== 'string') 
     throw new TypeError('Bad value'); 
    var interval = window.setInterval(test, freq || 200); 
    function test() { 
     if (!element.parentNode) // node detached, don't hold onto this 
      window.clearInterval(interval); 
     if (element.textContent === text) { 
      window.clearInterval(interval); 
      callback.call(element); 
     } 
    } 
} 

Тогда

// say you want the first <p> in the DOM tree 
var elm = document.querySelector('p'); 
// attach the condition 
waitForText(elm, 'some text',() => console.log('Text appears')); 

И в будущем ..

window.setTimeout(() => elm.textContent = 'some text', 6e3); 
// wait 6 seconds.. 
// callback fires 

Answer 2

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

var target = document.querySelector('p'); 

// create an observer instance 
var observer = new MutationObserver(function(mutations) { 
    mutations.forEach(function(mutation) { 
    [].every.call(mutation.addedNodes, function(node) { 
     if (node.nodeType === 3 && node.textContent === text) { // optionally you can remove nodeType checking if you pass the text inside some element like div etc. 
     console.log("text appeared"); 
     observer.disconnect(); 
     return false; 
     } 
     return true; 
    }); 
    }); 
}); 
observer.observe(target, { childList: true });