javascript - 在 JavaScript 函数中嵌套动态 AJAX 函数 - 并保持更新

Question

我有 AJAX 代码

<!-- Body Code -->
Listeners: <span id="cc_stream_info_listeners"></span>

<!-- Footer Code -->   
<script type="text/javascript" src="http://mysite.com/system/streaminfo.js"></script>
<script type="text/javascript" src="http://mysite.com/js.php/radio/streaminfo/rnd0"></script>

返回在线广播流的动态听众计数。此代码工作正常，但 js 文件位于远程主机上。所以我真的不知道它们是如何工作的。

我希望我的其中一个页面的页面标题能够动态包含监听器计数。就像 Twitter 页面计算源中可用的新推文一样。

例如(5) My Dashboard | My Site Name其中数字是来自 AJAX 函数的动态监听器计数。

这是我到目前为止所拥有的。

<!-- START: PAGE TITLE LISTENER CONTENT -->
<script>
function updatetitle() {
  var txt1 = "(";
  var txt2 = "5";
  var txt3 = ") My Dashboard | My Site Name";
  var n = txt1.concat(txt2,txt3);
  document.title = n;
}
</script>

<script>
window.onload = function() {
  updatetitle();
};
</script>

只需将文本“5”替换为 <span id="cc_stream_info_listeners">不起作用。但至少我知道我的页面更新组件是正确的。因为它在纯文本中按预期工作。

如何合并这两个函数 - 以便动态更新监听器计数？

Answer 1

您可以使用 MutationObserver 来检查元素 #cc_stream_info_listeners 何时被修改:https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver

您选择一个要观察的节点。对于您的项目，您应该观察 cc_stream_info_listeners。然后，每当 dom 发生变化时，就会触发回调。这减少了 setInterval 对浏览器造成的压力，因为它仅在事件实际发生时调用。

根据文档修改:http://jsfiddle.net/E5Rrc/

    // select the target node
    var title_tag = document.querySelector('title');
    var cc_stream_info_listeners = document.querySelector('#cc_stream_info_listeners');

    // create an observer instance
    var observer = new MutationObserver(function(mutations) {
      mutations.forEach(function(mutation) {
          title_tag.innerHTML = '('+cc_stream_info_listeners.innerHTML+') My Dashboard | My Site Name';
      });    
    });

    // configuration of the observer:
    var config = { childList: true, characterData: true, subtree: true };

    // pass in the target node, as well as the observer options
    observer.observe(cc_stream_info_listeners, config);

    // this is just for testing, to show that it works.
    setInterval(function() {
        cc_stream_info_listeners.innerHTML++;
    }, 500);