我试图在一些回调函数之后删除一个表但是表行只是继续插入。我不明白为什么在回调后没有删除表。我看到它实际上调用removeTable
函数,它知道table.length
大于1但没有任何反应。它太快了还是我做ajax的方式?
setInterval((function() {
showLeaders();
return showLeaders;
}()), 60000);
function showLeaders() {
uri = 'leaderboard.php'
ajaxLeaders(uri, callback);
setTimeout(function() {
uri = 'leaderboard.php';
ajaxLeaders(uri, callback2);
}, 15000);
}
function removeTable() {
// var table = document.getElementsByTagName('table'), index;
// console.log('im in the removeTable func '+table.length);
// for (index = table.length - 1; index >= 0; index--) {
// table[index].parentNode.removeChild(table[index]);
// }
Array.prototype.slice.call(document.getElementsByTagName('table')).forEach(
function(item) {
item.remove();
// or item.parentNode.removeChild(item); for older browsers (Edge-)
});
}
function ajaxLeaders(uri, callback) {
// console.log('ajaxLoad: ' + uri + ' - ' + params);
var request = (window.XMLHttpRequest) ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
request.onreadystatechange = callback;
request.open("POST", uri, true);
request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
request.send();
// clearTimeout(ajax_failed_timer);
// ajax_failed_timer = setTimeout(ajaxError,20000);
}
var nameArray = [];
var totalPointsArray = [];
function callback(evt) {
var tables = document.getElementsByTagName('table');
console.log(tables.length);
if (tables.length >= 1) {
console.log('should remove table cause tables more than 1');
removeTable();
}
if (evt.currentTarget.readyState == 4) {
// console.log(evt.currentTarget.responseText);
var obj = JSON.parse(evt.currentTarget.responseText);
for (var key in obj) {
if (obj.hasOwnProperty(key)) {
nameArray.push(obj[key].username);
totalPointsArray.push(obj[key].total_points);
}
}
}
var bottomLeader = '';
var leaderPoints = '';
var leadersTable = '';
leadersTable = document.createElement('table');
var leadersHTML = '';
leadersHTML = '<tr>' +
'<th>Rank</th>' +
'<th>Username</th>' +
'<th>Points</th>' +
'</tr>';
for (var i = 0; i < totalPointsArray.length; i++) {
var rank = i + 1;
var infoBarEle = document.getElementById('info-bar-js');
leadersTable.className = 'animated flipInX';
/// sort width by hightest points
var maxPoints = Math.max.apply(Math, totalPointsArray);
leadersHTML +=
'<tr>' +
'<td>' + rank + '</td>' +
'<td>' + nameArray[i] + '</td>' +
'<td>' + totalPointsArray[i] + '</td>'
'</tr>';
var leaderType = document.getElementById('leaderType');
leaderType.innerHTML = 'Fantasy Football - Weekly Winners';
document.body.className = 'animated slideInRight';
}
leadersTable.innerHTML = leadersHTML;
insertAfter(leadersTable, infoBarEle);
function callback2(evt) {
var tables = document.getElementsByTagName('table');
if (tables.length >= 1) {
removeTable();
}
if (evt.currentTarget.readyState == 4) {
// console.log(evt.currentTarget.responseText);
var obj = JSON.parse(evt.currentTarget.responseText);
for (var key in obj) {
if (obj.hasOwnProperty(key)) {
nameArray.push(obj[key].username);
totalPointsArray.push(obj[key].total_points);
}
}
}
var bottomLeader = '';
var leaderPoints = '';
var leadersTable = '';
leadersTable = document.createElement('table');
var leadersHTML = '';
leadersHTML = '<tr>' +
'<th>Rank</th>' +
'<th>Username</th>' +
'<th>Points</th>' +
'</tr>';
for (var i = 0; i < totalPointsArray.length; i++) {
var rank = i + 1;
var infoBarEle = document.getElementById('info-bar-js');
leadersTable.className = 'animated flipInX';
/// sort width by hightest points
var maxPoints = Math.max.apply(Math, totalPointsArray);
leadersHTML +=
'<tr>' +
'<td>' + rank + '</td>' +
'<td>' + nameArray[i] + '</td>' +
'<td>' + totalPointsArray[i] + '</td>'
'</tr>';
var leaderType = document.getElementById('leaderType');
leaderType.innerHTML = 'Fantasy Football - Season Winners';
document.body.className = 'animated slideInRight';
}
leadersTable.innerHTML = leadersHTML;
insertAfter(leadersTable, infoBarEle);
}
//insertAfter function
function insertAfter(newNode, referenceNode) {
referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}
&#13;