如何在Xamarin列表中实时更新订单创建后的已耗时？

核心思路是仅在首次加载时获取订单创建时间，后续完全在前端本地计算并更新耗时，彻底避免频繁请求后端的性能问题，具体实现方式如下：

• 首次加载订单数据时，将每个订单的**创建时间（转为时间戳或Date对象）**与订单ID等关键信息存在前端内存（比如数组、Map结构）中，同时计算初始耗时并完成页面渲染。
• 设置一个每分钟触发一次的定时器，但定时器触发时不请求后端，而是直接用当前时间减去本地存储的订单创建时间，重新计算已耗时，再更新对应DOM元素的内容。
• 额外优化细节：
  • 绑定DOM与数据：初始化时给每个订单DOM节点添加data-order-id属性，或者在内存中存储DOM节点与创建时间的映射，避免定时器触发时重复查找DOM，提升更新效率。
  • 封装时间格式化工具函数：写一个formatElapsedTime函数，接收时间差（毫秒），返回“X小时Y分钟”或“Y分钟”的格式化字符串，统一处理耗时显示逻辑。
  • 适配页面休眠状态：通过visibilitychange事件监听页面是否被隐藏，隐藏时暂停定时器，切回页面时恢复并立即更新一次，减少不必要的计算开销。

简单代码示例 #

// 首次从后端获取的订单数据（示例）
const orders = [
  { id: 1, createTime: new Date('2024-05-20 14:30:00').getTime() },
  { id: 2, createTime: new Date('2024-05-20 13:28:00').getTime() }
];

// 格式化耗时的工具函数
function formatElapsedTime(elapsedMs) {
  const totalMinutes = Math.floor(elapsedMs / 60000);
  const hours = Math.floor(totalMinutes / 60);
  const remainingMinutes = totalMinutes % 60;
  
  return hours > 0 ? `${hours}小时${remainingMinutes}分钟` : `${remainingMinutes}分钟`;
}

// 初始化渲染订单列表
function renderOrders() {
  const orderListEl = document.getElementById('order-list');
  orderListEl.innerHTML = orders.map(order => {
    const initialElapsed = Date.now() - order.createTime;
    return `<li data-order-id="${order.id}">订单${order.id} ${formatElapsedTime(initialElapsed)}</li>`;
  }).join('');
}

// 批量更新所有订单的耗时显示
function updateElapsedTimes() {
  orders.forEach(order => {
    const currentElapsed = Date.now() - order.createTime;
    const targetEl = document.querySelector(`li[data-order-id="${order.id}"]`);
    if (targetEl) {
      targetEl.textContent = `订单${order.id} ${formatElapsedTime(currentElapsed)}`;
    }
  });
}

// 初始化执行
renderOrders();
// 设置每分钟更新一次的定时器
let updateTimer = setInterval(updateElapsedTimes, 60000);

// 处理页面切换时的性能优化
document.addEventListener('visibilitychange', () => {
  if (document.hidden) {
    clearInterval(updateTimer);
  } else {
    updateTimer = setInterval(updateElapsedTimes, 60000);
    // 切回页面时立即更新一次，避免显示过期数据
    updateElapsedTimes();
  }
});

如果订单存在状态变更（比如完成、取消）的需求，可以通过WebSocket接收后端的状态推送，仅更新对应订单的内容，无需全量刷新列表，进一步降低性能开销。

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