这个需求涉及几个关键概念:
setInterval()
和setTimeout()
函数// 定义定时器间隔(毫秒)
const interval = x * 1000; // x秒转换为毫秒
// 启动定时器
const timer = setInterval(fetchData, interval);
// 获取数据的函数
function fetchData() {
// 创建AJAX请求
const xhr = new XMLHttpRequest();
// 配置请求
xhr.open('GET', 'your-api-endpoint', true);
// 设置回调函数
xhr.onload = function() {
if (xhr.status === 200) {
// 解析响应数据(假设是JSON格式)
const data = JSON.parse(xhr.responseText);
// 将数据附加到div中
const div = document.getElementById('target-div');
div.innerHTML += formatData(data); // 使用自定义格式化函数
} else {
console.error('请求失败:', xhr.status);
}
};
xhr.onerror = function() {
console.error('请求发生错误');
};
// 发送请求
xhr.send();
}
// 数据格式化函数(根据实际数据结构调整)
function formatData(data) {
// 这里简单示例,实际应根据数据结构调整
return `<div>${JSON.stringify(data)}</div>`;
}
// 如果需要停止定时器
// clearInterval(timer);
const interval = x * 1000;
const timer = setInterval(async () => {
try {
const response = await fetch('your-api-endpoint');
if (!response.ok) throw new Error('Network response was not ok');
const data = await response.json();
const div = document.getElementById('target-div');
div.innerHTML += formatData(data);
} catch (error) {
console.error('获取数据失败:', error);
}
}, interval);
function formatData(data) {
// 根据实际数据结构返回HTML字符串
return data.map(item => `<div>${item.someProperty}</div>`).join('');
}
问题1:数据重复加载
问题2:内存泄漏
问题3:请求失败
以上方案可以根据具体需求进行调整和扩展。