jQuery新手求教：多次GET请求的最佳实践及代码优化建议

作为jQuery新手，能察觉到当前实现可能存在大量重复查询的问题，已经很有洞察力啦！咱们来一步步优化这段代码，既解决性能问题，又让代码更规整好维护～

1. 先搞定重复请求的问题（请求锁） #

如果这段代码是绑定在点击、输入这类高频触发的事件上，很容易短时间内发起一堆重复请求。咱们可以加个简单的请求锁，避免同时发起多个请求：

// 定义一个标记，记录当前是否有请求在进行
let isRequesting = false;

function fetchItem(id) {
  // 如果已有请求在跑，直接返回，不重复发起
  if (isRequesting) return;
  isRequesting = true;
  
  $.ajax({
    type: 'GET',
    dataType: 'json',
    url: `api/items/${id}`, // 用ES6模板字符串拼接URL，比加号更清晰
    success: function(data) {
      // 你的原有业务逻辑
      $('#item-all').empty();
      $('#builder').addClass('hidden');
      if ($('#btnsuc').length === 0) {
        $('#page').append('<div class="item-searcher" id="item-searcher"><button class="btn-success" id="btnsuc">Retour</button>...');
      }
      // 请求完成后，把标记重置，允许后续请求
      isRequesting = false;
    },
    error: function() {
      // 出错也要重置标记哦，不然以后就没法发起请求了
      isRequesting = false;
      // 这里可以加个错误提示，比如给用户弹个消息
      alert('加载数据失败，请稍后重试');
    }
  });
}

2. 减少DOM操作，降低页面重排 #

你现在的代码里多次直接操作DOM，比如empty()、addClass()、append()，每一次DOM操作都会触发页面重排，次数多了会让页面变卡。咱们可以把DOM操作合并，或者用文档片段来批量更新：

success: function(data) {
  // 创建一个文档片段，把要添加的元素先放在里面
  const fragment = document.createDocumentFragment();
  
  if ($('#btnsuc').length === 0) {
    // 先创建好要添加的元素
    const searcherDiv = $('<div class="item-searcher" id="item-searcher"><button class="btn-success" id="btnsuc">Retour</button>...')[0];
    fragment.appendChild(searcherDiv);
  }
  
  // 一次性完成所有DOM更新，减少重排次数
  $('#item-all').empty();
  $('#builder').addClass('hidden');
  $('#page').append(fragment);
  
  isRequesting = false;
}

3. 拆分代码，让逻辑更清晰 #

把数据处理、DOM更新和AJAX请求的逻辑分开，以后维护起来会轻松很多，比如：

// 专门处理数据的函数：可以在这里做数据验证、转换
function processItemData(data) {
  // 举个例子：如果数据为空，返回默认值
  return data || {};
}

// 专门更新DOM的函数：只负责把数据渲染到页面
function updateItemDOM(data) {
  $('#item-all').empty();
  $('#builder').addClass('hidden');
  
  if ($('#btnsuc').length === 0) {
    $('#page').append('<div class="item-searcher" id="item-searcher"><button class="btn-success" id="btnsuc">Retour</button>...');
  }
}

// 专门负责AJAX请求的函数
function fetchItem(id) {
  if (isRequesting) return;
  isRequesting = true;
  
  $.ajax({
    type: 'GET',
    dataType: 'json',
    url: `api/items/${id}`,
    success: function(data) {
      const processedData = processItemData(data);
      updateItemDOM(processedData);
      isRequesting = false;
    },
    error: function(xhr, status, error) {
      console.error('请求出错啦:', error);
      isRequesting = false;
    }
  });
}

4. 缓存请求结果，避免重复调用API #

如果同一个id会被多次查询，咱们可以把请求结果缓存起来，下次再查同一个id的时候直接用缓存的结果，不用再发请求啦：

// 用一个对象来存缓存的结果
const itemCache = {};

function fetchItem(id) {
  // 如果缓存里已有这个id的数据，直接渲染，不用发请求
  if (itemCache[id]) {
    updateItemDOM(itemCache[id]);
    return;
  }
  
  if (isRequesting) return;
  isRequesting = true;
  
  $.ajax({
    type: 'GET',
    dataType: 'json',
    url: `api/items/${id}`,
    success: function(data) {
      // 把数据存入缓存
      itemCache[id] = data;
      const processedData = processItemData(data);
      updateItemDOM(processedData);
      isRequesting = false;
    },
    error: function(xhr, status, error) {
      console.error('请求出错啦:', error);
      isRequesting = false;
    }
  });
}

内容的提问来源于stack exchange，提问作者Zeyukan Ich'