Постоянно проверяйте длину элемента и выполняйте действие, если оно когда-либо 1

Question

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

Так что в данный момент у меня есть это:

function loginNotice() { 
    //do prompt 
} 
keepAlive(); 

function keepAlive() { 
    if($('.username_field').length == 1){ 
     loginUser(); 
    } 
    try { 
     setTimeout(function(){keepAlive();}, 10000); 
    } catch (ex){ 
    } 
} 

Я не думаю, что это очень эффективно. Поскольку он проверяет все так часто и запускает подсказку, если это необходимо. Дело в том, что страница может загружаться, а длина может быть уже 1, или может быть 0. Я не знаю, что будет в любой момент времени, поэтому я не могу просто сделать изменения.

Есть ли способ, которым я могу сделать это более эффективно?

Answer 1

Вместо этого вы можете использовать mutation observer на родительском/предковском узле, наблюдая за изменениями в subtree и/или childList.

var ancestor = $("...closest ancestor that doesn't change..."); // Worst case, $('body') 
var ob = new MutationObserver(function() { 
    if($('.username_field').length == 1){ 
     loginUser(); 
    } 
}); 
ob.observe(ancestor[0], { 
    subtree: true, // You probably only need... 
    childList: true // ...one of these or the other 
}); 

Сказав, что выполнение DOM-запроса каждые 10 секунд не является проблемой; если вам не нужны более быстрые реакции, то ваше текущее решение в порядке.