постоянно проверяйте, существует ли что-то и что-то делает

Question

Содержимое на моей странице загружается через AJAX (это шаг за шагом), и мне нужно проверить, существует ли конкретный div.

Этот конкретный div появляется после нескольких щелчков мышью. Я должен упомянуть, что я не знаю количество кликов.

Как я могу постоянно проверять, существует ли div, пока он не найдет его, и после того, как он найдет что-нибудь?

Позже редактирование: Как я могу постоянно проверять до тех пор, пока определенный div не будет существовать и что-то делать после этого. Точнее, div есть, но после нескольких вызовов ajax он удаляется.

Answer 1

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

Используйте событие DOMSubtreeModified, которое позволит любому методу, клику или когда-либо добавлять (или удалять) контент, и он будет обнаружен.

(function(doc,found) { 
    window.addEventListener('DOMSubtreeModified', function() { 

    var yourdiv = doc.querySelector("#yourdiv"); 

    if(found && !yourdiv){ 
     // Was there but is gone, do something 
     found = false; 

    } 

    if(yourdiv){ 
     // Found it, do something 
     found = true; 

    } 

    }, false); 
})(document,false); 

Работает так, когда содержимое вставлено (или удалено), событие загорается и проверяет ваш конкретный div.

Он также имеет преимущества от того, что он не вызывается каждые nn второй, как таймер, и не обрабатывается при каждом нажатии, только когда DOM изменен.

---

Как прокомментировал @metarmask, DOMSubtreeModified является устаревшим, но все еще имеет лучший кросс охват браузеров, чем новее MutationObserver.

Эквивалентный образец, используя новый метод будет

(function(doc,found) { 
    var observer = new MutationObserver(function(mutations) { 
     mutations.forEach(function(mutation) { 

      var yourdiv = doc.querySelector("#yourdiv"); 

      if(found && !yourdiv){ 
      // Was there but is gone, do something 
      found = false; 

      } 

      if(yourdiv){ 
      // Found it, do something 
      found = true; 

      } 

     }); 
    }); 
    observer.observe(doc, { childList: true, subtree: true }); 
})(document,false); 

Answer 2

Использование setInterval:

var divCheckingInterval = setInterval(function(){ 
    // Find it with a selector 
    if(document.querySelector("#element")){ 
     console.log("Found!"); 
     clearInterval(divCheckingInterval); 
     // Do something 
    } 
}, 500); 

Лучший способ сделать что-то, когда DIV появляется с помощью MutationObserver S:

var observer = new MutationObserver(function(mutations){ 
    mutations.forEach(function(mutation){ 
     for(var i = 0;i < mutation.addedNodes.length;i++){ 
      if(mutation.addedNodes[i].id === "the-element"){ 
       console.log("Found!"); 
       observer.disconnect(); 
       // Do something 
      } 
     } 
    }); 
}); 
observer.observe(document.querySelector("#parent-of-where-the-div-is-going-to-appear"), {childList: true, subtree: true}); 

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

Answer 3

Используйте setInterval для периодической проверки вашего div (500 мс ниже). Когда он будет найден, предпримите действие и не забудьте очистить интервал.

t = setInterval(function(){ 
    var mydiv = $('div.myclass'); 
    if (mydiv.length > 0) { 
     console.log('Div exists'); 
     clearInterval(t); 
    } 
}, 500); 

Answer 4

Если это происходит после определенного количества кликов, вы можете отслеживать после каждого нажатия на страницу.

function checkIfDivExists() { 
    if (document.querySelector('#your-div')) { 
    // Stop monitoring 
    document.removeEventListener('click', checkIfDivExists); 
    // Do what you need to do 
    } 
} 

document.addEventListener('click', checkIfDivExists) 

Таким образом, вы проверяете только тогда, когда это необходимо, вместо того чтобы пытаться несколько раз в секунду, что замедлит страницу.

Answer 5

var time = setInterval(check, 100); 

check = function() 
{ 
    if ($("div").length > 0) 
    { 
     //do something 
     clearInterval (time); // clear countdown 
    } 
}