如何每隔X秒用PHP的scandir()读取目录更新JS轮播图

你的初始思路是页面加载时用PHP一次性读取目录，但要实现每隔X秒动态更新，因为前端无法直接访问服务器文件系统，所以需要结合后端接口+前端定时AJAX请求来实现。下面是具体的步骤和代码：

1. 提取PHP目录读取逻辑为独立接口 #

首先把原来的目录读取代码单独做成一个PHP接口文件（比如get_images.php），专门返回最新的图片列表JSON：

<?php
$dir = 'images';
// 读取目录并按倒序排列（和你原来的scandir参数一致）
$data = scandir($dir, 1);
// 移除数组末尾的.和..
$dirdata = array_slice($data, 0, count($data) - 2);

// 设置正确的响应头，确保前端能识别为JSON
header('Content-Type: application/json');
// 返回JSON格式的图片列表
echo json_encode($dirdata, JSON_HEX_TAG);
?>

2. 前端定时请求接口更新轮播 #

在你的页面JS中，保留初始化加载逻辑，再添加setInterval定时请求接口，拿到新数据后更新轮播：

// 封装加载图片列表的函数
function loadImageList() {
  // 加时间戳避免浏览器缓存旧数据
  fetch('get_images.php?t=' + Date.now())
    .then(response => {
      if (!response.ok) throw new Error('请求失败');
      return response.json();
    })
    .then(data => {
      // 保存当前数据，用于后续对比是否有变化
      if (JSON.stringify(window.currentCarouselData) !== JSON.stringify(data)) {
        window.currentCarouselData = data;
        set_data(data);
      }
    })
    .catch(err => console.error('加载图片列表出错:', err));
}

// 页面加载时先执行一次初始化
loadImageList();

// 每隔X秒刷新，这里X=5即5秒，可自行修改数值
const refreshInterval = 5 * 1000;
setInterval(loadImageList, refreshInterval);

可选优化点 #

• 减少不必要更新：通过对比新旧数据的JSON字符串，只有当图片列表真的变化时才调用set_data，避免无意义的DOM操作
• 错误重试机制：如果请求失败，可以添加重试逻辑，比如失败后隔3秒再尝试一次
• 权限检查：确保PHP进程拥有读取images目录的权限，否则scandir会返回错误导致接口失效

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