不断检查一个元素的长度，并执行一个行动，如果它曾经是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 
}); 

尽管如此，尽管每10秒做一次DOM查询根本不是问题;如果你不需要比那更快的反应，你目前的解决方案是好的。