如何获取Vis Timeline的rollingMode状态及追踪其切换事件

一、自定义状态变量维护rollingMode状态 #

由于Timeline原生未提供直接获取rollingMode状态的API，最可靠的方式是自行维护状态变量，同步所有会改变rollingMode的操作：

• 初始化时设置默认状态（你默认开启，所以初始值为true）：

  let isRollingModeActive = true;
  

• 在rangechanged事件中处理用户拖动关闭的情况：

  timeline.on('rangechanged', (event) => {
    if (event.byUser) {
      // 用户手动拖动时间线，rollingMode会被关闭
      isRollingModeActive = false;
    }
  });
  

二、监听重置按钮的点击事件 #

对于点击蓝色重置按钮开启rollingMode的操作，通过DOM事件监听捕获：

• 先通过浏览器开发者工具确认重置按钮的CSS类名（通常类似timeline-reset-btn），再用事件委托绑定点击事件：

  document.addEventListener('click', (e) => {
    // 替换成实际的重置按钮选择器
    if (e.target.closest('.timeline-reset-btn')) {
      isRollingModeActive = true;
      // 这里可添加业务逻辑，比如同步输入框状态
    }
  });
  

三、业务逻辑适配：输入框切换视图时的处理 #

当用户通过输入框指定时间范围时，先检查自定义状态变量，避免盲目调用toggleRollingMode()：

function applyCustomTimeRange(startTime, endTime) {
  // 如果当前处于滚动模式，先关闭
  if (isRollingModeActive) {
    timeline.toggleRollingMode();
    isRollingModeActive = false;
  }
  // 设置用户指定的时间范围
  timeline.setWindow(startTime, endTime);
}

四、可选：状态同步校验 #

为避免极端情况下状态不一致（比如用户通过未监听的操作改变rollingMode），可添加状态校验逻辑：

function syncRollingModeStatus() {
  const currentWindow = timeline.getWindow();
  const now = new Date();
  // 假设滚动模式开启时，时间线窗口结束时间接近当前时间（误差可根据业务调整）
  const timeDiff = Math.abs(now.getTime() - currentWindow.end.getTime());
  isRollingModeActive = timeDiff < 1500; // 1.5秒内判定为滚动模式开启
}

// 可在关键节点调用，比如输入框聚焦、定时同步
setInterval(syncRollingModeStatus, 5000); // 每5秒同步一次状态

内容的提问来源于stack exchange，提问作者R. Bert