jQuery：如何复用JSON数据及优化列表定时刷新逻辑？

复用JSON数据的核心是把数据存到可重复访问的地方，避免每次需要都重新请求或解析，下面给你几个实用的方案：

• 全局变量存储：如果是页面内多次用到的JSON数据，可以直接存在全局变量里，需要时直接调用：

  // 初始化缓存变量
  let cachedJsonData = null;
  
  // 第一次获取并存储数据（比如从接口请求）
  $.get('/api/get-data', function(response) {
    cachedJsonData = response;
    // 首次使用数据渲染内容
    renderContent(cachedJsonData);
  });
  
  // 后续需要复用数据时直接调用
  $('#reuse-btn').click(function() {
    if (cachedJsonData) {
      renderAnotherSection(cachedJsonData);
    }
  });
  

• 用jQuery的data()方法绑定到DOM元素：如果数据和某个DOM元素强相关，可以把数据存在元素的自定义数据属性里，方便后续快速获取：

  // 把JSON数据存储到目标元素
  $('#user-card').data('userInfo', {name: 'Guillermo', role: 'Developer'});
  
  // 后续复用数据
  const userData = $('#user-card').data('userInfo');
  console.log(userData.name); // 输出Guillermo
  

• 本地持久化存储：如果需要跨页面或者刷新后还能复用数据，可以用localStorage或sessionStorage：

  // 存储时要把JSON转成字符串
  const appConfig = {theme: 'dark', fontSize: '14px'};
  localStorage.setItem('appConfig', JSON.stringify(appConfig));
  
  // 复用时解析回JSON格式
  const savedConfig = JSON.parse(localStorage.getItem('appConfig'));
  console.log(savedConfig.theme); // 输出dark
  

你的问题核心是避免全量渲染导致的滚动位置丢失和不必要的性能消耗，我们可以通过对比新旧数据的唯一标识实现增量更新，具体修改思路和代码如下：

核心逻辑 #

1. 给每个列表条目绑定唯一标识（比如数据里的id字段），方便对比；
2. 每次获取新数据后，先收集当前页面已有的条目标识；
3. 找出新数据中存在但页面没有的（新增条目）、页面有但新数据没有的（待删除条目）；
4. 只对新增/删除的条目做操作，保留已存在的条目不动。

修改后的代码示例 #

function update_list() {
  // 1. 获取新数据（实际场景替换成你的AJAX请求）
  $.get('/api/get-list-items', function(newItems) {
    const $listContainer = $('#list');
    // 2. 收集当前页面已有的条目ID（假设每个条目有data-id属性）
    const existingItemIds = new Set();
    $listContainer.find('li').each(function() {
      existingItemIds.add($(this).data('id'));
    });

    // 3. 渲染新增条目：新数据里不在现有列表中的项
    newItems.forEach(item => {
      if (!existingItemIds.has(item.id)) {
        const $newListItem = buildListItem(item);
        $listContainer.append($newListItem);
      }
    });

    // 4. 删除已移除的条目：现有列表中不在新数据里的项
    const newItemIds = new Set(newItems.map(item => item.id));
    $listContainer.find('li').each(function() {
      const itemId = $(this).data('id');
      if (!newItemIds.has(itemId)) {
        $(this).remove();
      }
    });

    // 保持定时更新
    interval = setTimeout(update_list, 5000);
  });
}

// 抽离单个条目渲染函数（把你原来的月份转换等逻辑放这里）
function buildListItem(item) {
  const month = new Array();
  month[0] = '{% trans 'Jan' %}';
  month[1] = '{% trans 'Feb' %}';
  // ... 补充其他月份的翻译
  // 根据item的日期获取对应月份名称（这里假设item的date是月份索引）
  const monthName = month[item.date];

  // 返回构建好的DOM元素，记得加上唯一标识data-id
  return $(`<li data-id="${item.id}">
    <span class="month">${monthName}</span>
    <span class="item-title">${item.title}</span>
    <!-- 其他条目内容 -->
  </li>`);
}

额外优化：保持滚动位置 #

如果担心新增条目后滚动位置被打乱，可以在更新前记录位置，更新后恢复：

function update_list() {
  $.get('/api/get-list-items', function(newItems) {
    const $listContainer = $('#list');
    // 记录当前滚动位置
    const currentScrollTop = $listContainer.scrollTop();

    // ... 上面的新增/删除逻辑 ...

    // 恢复滚动位置
    $listContainer.scrollTop(currentScrollTop);

    interval = setTimeout(update_list, 5000);
  });
}

这样修改后，用户滚动到列表下方时，只会新增新条目、删除已移除的旧条目，不会清空整个列表，滚动位置也能保持，体验会流畅很多。

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