Breaking News Ticker定时更新报错：$(...).breakingNews不是函数

问题背景 #

• 给本地体育俱乐部搭建了新闻展示网站，使用jQuery的Breaking News Ticker插件，首次加载完全正常
• 需求：每X分钟通过Node接口../data/headlines自动更新新闻条目
• 触发定时更新后报错：Uncaught TypeError: $(...).breakingNews is not a function at fillTicker (schemeScripts.js:15:22)

报错原因 #

这个插件的breakingNews方法仅支持初始化调用一次。首次调用后，插件会修改原有DOM结构，且不会将该方法重新挂载到jQuery原型上；二次调用时找不到该函数，同时重复初始化还会导致DOM结构混乱。

解决方案 #

无需重复调用初始化方法，直接更新新闻数据源即可，步骤如下：

1. 初始化插件时可保存实例引用（若插件支持返回实例）
2. 定时请求新数据，直接替换新闻列表DOM内容，或使用插件自带的更新方法（优先官方方案）
3. 若插件无内置更新方法，手动清空旧列表、插入新内容后重启滚动效果

修改后的代码示例 #

scheme.ejs代码

<div class="bn-breaking-news bn-effect-scroll bn-direction-ltr" id="newsTicker" style="height: 40px; line-height: 38px; border-radius: 2px; border-width: 1px;">
  <div class="bn-label" style="background: #A32638;">NIEUWS</div>
  <div class="bn-news" style="right: 0px;">
    <ul>
      <li>
        <span class="bn-loader-text">Loading news items...</span>
      </li>
    </ul>
  </div>
</div>
<script type="text/javascript">
  let newsTickerInstance;
  $(document).ready(function () {
    // 初始化插件并保存实例（若插件返回实例）
    newsTickerInstance = $("#newsTicker").breakingNews({
      position : 'fixed-bottom',
      source: {
        type:'json',
        url:'../data/headlines', 
        limit:20, 
        showingField:'title',
        linkEnabled: false,
        target:'_blank', 
        seperator: '<span class="bn-seperator" style="background-image:url(./images/logo.png);"></span>',
        errorMsg: '无法加载新闻，请检查设置。'
      }
    });
    // 延迟1秒执行首次更新，避免与初始化请求冲突
    setTimeout(fillTicker, 1000);
    // 定时触发更新
    setInterval(fillTicker, msToNextHour());
  })
</script>

schemeScripts.js代码

function fillTicker() {
  // 请求最新新闻数据
  $.getJSON('../data/headlines', function(newHeadlines) {
    const newsList = $('#newsTicker .bn-news ul');
    newsList.empty(); // 清空旧内容

    // 遍历新数据生成列表项，取前20条
    newHeadlines.slice(0,20).forEach((item, index) => {
      const listItem = $('<li>').text(item.title);
      // 除最后一条外，每条后添加分隔符
      if (index !== newHeadlines.length - 1) {
        listItem.append('<span class="bn-seperator" style="background-image:url(./images/logo.png);"></span>');
      }
      newsList.append(listItem);
    });

    // 若插件支持重启方法，直接调用（示例）
    // newsTickerInstance?.restart();
  }).fail(function() {
    // 请求失败时显示错误提示
    $('#newsTicker .bn-news ul').html('<li>加载新闻失败，请稍后再试</li>');
  });
}

额外提醒 #

• 优先采用直接更新DOM的方式，避免反复初始化插件
• 可查看插件文档确认是否有官方更新/刷新方法，优先使用官方方案
• 必须添加错误处理，避免请求失败时用户无提示

内容的提问来源于stack exchange，提问作者Arjan_IO