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

Nest a dynamic AJAX function in a javascript function - And keep it updating

本文关键字：函数 更新 JavaScript 动态 AJAX 嵌套      更新时间：2023-09-26

我有 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">是行不通的。但至少我知道我的页面更新组件是正确的。因为它与纯文本按预期工作。

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

您可以使用

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);
相关文章：