Question

我在每3秒加载新的JSON数据时进行投注应用，如果有必要，添加，删除或更新某些行。我使用jQuery tablesorter插件进行表格排序。它工作得很好，但我有一个特定的案例。如果有结果更改，我添加“突出显示”CSS类，以便使用CSS3动画将行以橙色脉冲约8秒，并在完成动画后删除该类。这很好用，但是如果我使用tablesorter resort选项，那个动画会在每3s重新开始，并且几乎永远不会结束，因为它持续的时间比设置的间隔长（3s小于8s）。因此，如果我将resort选项设置为false，则动画问题不存在，并且在完成之前它将是连续的，但我想在每次更新时使用resort选项。

为了更好地解释这种情况，这里有一个JSFiddle https://jsfiddle.net/savicmi/h9gpqrwn/15/来演示这个问题。如果在其中添加了一行包含Basketball，则该行的背景将会发出脉冲。看起来tablesorter重绘了table的主体，如果它是resort = true，并且可能它是从一开始就开始CSS3动画而不是连续持续时间直到动画结束的原因。怎么解决这个问题？

$(document).ready(function() { 
  $(".table-liveevents").tablesorter({ 
    sortList: [[1,0]],
    ignoreCase: true,
    textExtraction: {
      '.sorter-date' : function(node, table, cellIndex){ 
        var dat =   node.textContent.split(/\/|\s|\:/);
        var date = dat[1]+'/'+dat[0]+'/'+dat[2]+' '+dat[3]+':'+dat[4];
        return new Date(date).getTime();                        
      }
    },
    resort: true
  });

var data = {
  "live_ev": [
    {
      "id": 206622,
      "date": "28/06/2017 11:55",
      "name": "Evtimova, Dia - Dulgheru, Alexandra",
      "sport": "Tennis"
    },
    {
      "id": 206553,
      "date": "28/06/2017 11:40",
      "name": "Sabanin, Yan - Matsukevitch, Denis",
      "sport": "Tennis",
    },
    {
      "id": 206754,
      "date": "28/06/2017 13:05",
      "name": "Crvena Zvezda - Partizan",
      "sport": "Basketball"
    }]
};

    function addRow(data, table) {

    if (table.find('tr#r_'+data.id).length == 0) {
        var tr = document.createElement('tr');      
        tr.id = 'r_' + data.id;
        tr.className = 'details';
        for(var j = 1; j <= 3; j++){
          var td = document.createElement('td');
          td.appendChild(document.createTextNode( data[Object.keys(data)[j]]));
          tr.appendChild(td);
        }       
        table.find('tbody').append(tr); 
    }
    }

  var isFirst = true;
  setInterval(function() {

    var i = Math.floor(Math.random() * data.live_ev.length);
    var $basketball = $('.table-liveevents').find('tr:has(td:contains("Basketball"))');

    addRow(data.live_ev[i], $('.table-liveevents'));

    if ($basketball.length > 0 && isFirst==true) {
      $basketball.addClass("highlight").one('webkitAnimationEnd mozAnimationEnd msAnimationEnd oAnimationEnd animationend', function(){
        $(this).removeClass("highlight");
      });
      isFirst = false;
    }

    $('.table-liveevents').trigger("update");    

  }, 3000);     

});

Tablesorter与setInterval和CSS3动画结合使用

0 个答案: