调用回调函数后无法删除表

时间:2016-08-19 01:10:53

标签: javascript ajax

我试图在一些回调函数之后删除一个表但是表行只是继续插入。我不明白为什么在回调后没有删除表。我看到它实际上调用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;
&#13;
&#13;

0 个答案:

没有答案