Подождите, прежде чем запускать функцию JavaScript

Question

Я пытаюсь воспроизводить звук каждый раз, когда пользователь получает новое уведомление. Путь, я загружая уведомления на моей странице просто:

(function($) 
{ 
    $(document).ready(function() 
    { 

     var $container = $("#noti"); 
     $container.load("notify.php"); 
     var refreshId = setInterval(function() 
     { 
      $container.load('notify.php'); 
     }, 1000); 
    }); 
})(jQuery); 

Это работает путем обновления Div контейнера с любым номером кода PHP рассылает. он повторяет каждую секунду (возможно, не самый эффективный способ, но работает).

У меня есть еще один кусок кода, который проверяет, когда изменяется содержание DIV, а затем создает окно предупреждения (который я изменится на воспроизведение звука, когда скрипт выполняется):

var myElement = document.getElementById('noti'); 
if(window.addEventListener) { 
    // Normal browsers 
    myElement.addEventListener('DOMSubtreeModified', contentChanged, false); 
} else 
    if(window.attachEvent) { 
     // IE 
     myElement.attachEvent('DOMSubtreeModified', contentChanged); 
    } 

function contentChanged() { 
    // this function will run each time the content of the DIV changes 
     alert("js is working"); 

} 

Этот скрипт работает, однако он также создает предупреждение или первую загрузку уведомлений. Это происходит из-за того, что он запускается как пустой div, а затем загружает данные, которые вызывают этот скрипт оповещений. Единственный способ, которым я мог подумать обойти это, - это отложить загрузку скрипта на пару секунд, пока сценарий AJAX выполняет свою работу.

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

Answer 1

Вместо того, чтобы сделать это, используйте пользовательское событие, которое вы Срабатывать отделки нагрузки:

var refreshId = setInterval(reloadContainer, 1000) 
function reloadContainer() { 
    $container.load('notify.php', function success() { 
     $container.trigger('loaded') 
    }) 
} 
$(myElement).on('loaded', contentChanged)