利用js随机调用txt文档id元素进行随机展示

额外提示：
如果你有多个地方需要调用并更新不同的 div，可以将 div 元素的 ID 作为参数传递给 getRandomLine 函数，使得这个函数更加通用。

jquery版

function getRandomLine(divId) {
  $.ajax({
    url: '/txt/data1.txt',
    type: 'GET',
    dataType: 'text',
    success: function(data) {
      var lines = data.split('\n');
      var randomLine = lines[Math.floor(Math.random() * lines.length)];
      document.getElementById(divId).textContent = randomLine;
    },
    error: function(xhr, status, error) {
      alert('获取文件失败:', error);
    }
  });
}

// 调用该函数时传入不同的 divId
getRandomLine('random_txt1_1');

原生js版

function getRandomLine(divId) {
  // 使用 fetch 请求获取文件内容
  fetch('/txt/data1.txt')
    .then(response => {
      if (!response.ok) {
        throw new Error('网络响应失败');
      }
      return response.text();
    })
    .then(data => {
      // 按行拆分文本
      var lines = data.split('\n');
      // 随机选择一行
      var randomLine = lines[Math.floor(Math.random() * lines.length)];
      // 更新 div 内容
      document.getElementById(divId).textContent = randomLine;
    })
    .catch(error => {
      // 处理错误
      alert('获取文件失败: ' + error.message);
    });
}

// 调用该函数时传入不同的 divId
getRandomLine('random_txt1_1');

代码优化

要避免同一个 .txt 文件在多次调用中重复请求，我们可以使用缓存机制。在第一次请求文件时，我们将文件的内容保存在一个变量中。后续调用时，如果该变量已经存在，我们直接使用缓存的数据，而不再发起新的 AJAX 请求。

以下是修改后的代码：

代码修改：

// 缓存变量
var txtDataCache1 = null; // 用于缓存 data1.txt 内容
var txtDataCache2 = null; // 用于缓存 data2.txt 内容

// 获取并显示随机行的通用函数
function getRandomLine(divId, fileName, cache) {
  // 如果缓存为空，则发送请求获取文件内容
  if (cache === null) {
    $.ajax({
      url: fileName,
      type: 'GET',
      dataType: 'text',
      success: function(data) {
        // 缓存文件内容
        cache = data;
        // 处理并显示随机行
        displayRandomLine(divId, cache);
      },
      error: function(xhr, status, error) {
        alert('获取文件失败:', error);
      }
    });
  } else {
    // 如果缓存已存在，直接显示随机行
    displayRandomLine(divId, cache);
  }
}

// 处理显示随机行的函数
function displayRandomLine(divId, fileData) {
  var lines = fileData.split('\n');
  var randomLine = lines[Math.floor(Math.random() * lines.length)];
  document.getElementById(divId).textContent = randomLine;
}

// 调用该函数时传入不同的 divId 和对应的文件
getRandomLine('random_txt1_1', '/txt/data1.txt', txtDataCache1);
getRandomLine('random_txt2_1', '/txt/data2.txt', txtDataCache2);
getRandomLine('random_txt2_2', '/txt/data2.txt', txtDataCache2);
getRandomLine('random_txt2_3', '/txt/data2.txt', txtDataCache2);

代码解释：

1. 缓存变量：

   • txtDataCache1 和 txtDataCache2 用于缓存 data1.txt 和 data2.txt 的内容。每个文件对应一个缓存变量。

2. 通用 getRandomLine 函数：

   • getRandomLine 函数现在是通用的，可以处理多个 .txt 文件。
   • 如果缓存为空，表示该文件内容还没有被请求过，就通过 $.ajax 发起请求，获取文件内容并存入缓存。
   • 如果缓存已经存在，则直接使用缓存的文件内容，避免重新请求。

3. displayRandomLine 函数：

   • 用来从文件内容中随机选择一行并显示在指定的 div 元素中。

4. 调用示例：

   • 对于 data1.txt，第一次调用 getRandomLine('random_txt1_1', '/txt/data1.txt', txtDataCache1) 会加载文件并缓存。
   • 对于 data2.txt，由于多个 div 使用同一个文件，后续的调用不会再发起请求，而是直接使用缓存的数据。

优点：

• 减少重复请求：每个文件只会请求一次，后续调用直接使用缓存。
• 提升性能：避免多次发起相同的网络请求，减少页面加载时间和服务器负担。

这样，您就可以避免同一个 .txt 文件多次调用，同时保持代码简洁并提升效率。