Как я могу отменить последний вызов jsTree (используя $ .jstree())?

Question

Использование jsTree 1.0-rc3

Использование дерева JS У меня есть раскрывающийся рафинер. Это установит содержимое, загруженное в дерево. Но при каждом вызове дерево обновляется без прерывания последнего вызова, поэтому вы можете иметь дерево, показывающее старые вызовы, если они вернутся после нового вызова.

Как отменить последний звонок?

// On change, update tree 
$('#entitySelector1').change(function() { 
    .... 
    applyJstree(1); 
} 

var applyJstree = function(num) { 
    $('#ent{0}'.format(num)).jstree({ 
      "plugins" : ["themes","json_data","dnd","search","types","ui","contextmenu", "overlay", "hotkeys"], 
      "core" : { 
       "initially_open" : [ "tree{0}_root".format(num) ] , 
       "animation" : 100 
      },   
      "json_data" : { 
       "ajax" : { 
        "url" : function (currentNode) { 
         var currentEntity = $('#entitySelector{0}'.format(num)).val(); 
         var maxResults = treeSettings['ent{0}maxResults'.format(num)]; 

         if (currentNode === 'ent{0}_root'.format(num) || currentNode === -1){ 
          return 'treeAjaxServer.php?action=init&entityId=' + $('#entitySelector{0}'.format(num)).val() 
           + '&sort=' + treeSettings['ent{0}sortMode'.format(num)] 
           + '&sortDirection= ' + treeSettings['ent{0}sortDirection'.format(num)] 
           + '&needle=' + $('#search{0}'.format(num)).val() 
           + '&projectId=' + $('#projectFilter{0}'.format(num)).val() 
           + '&showChildCount=' + treeSettings['ent{0}childCount'.format(num)] 
           + '&maxResults='+maxResults; 
         } else { 
          return 'treeAjaxServer.php?action=branch&entityId=' 
           + $('#entitySelector{0}'.format(num)).val() + '&sort=' 
           + treeSettings['ent{0}sortMode'.format(num)] 
           + '&projectId=' + $('#projectFilter{0}'.format(num)).val() 
           + '&sortDirection= ' + treeSettings['ent{0}sortDirection'.format(num)] 
           + '&showChildCount=' + treeSettings['ent{0}childCount'.format(num)]; 
         } 
        }, 
        "data" : function (node) { 
         var currentEntity = $('#entitySelector{0}'.format(num)).val(); 
         var maxResults = treeSettings['ent{0}maxResults'.format(num)]; 

         if (node === -1){ 
          return {'prefix' : 'tree{0}_'.format(num),"maxResults" : maxResults}; 
         } else { 
          return { //Send this to the server with the ajax request 
           "prefix" : "tree{0}_".format(num), 
           "parentNodeId" : node.attr("id"), 
           "maxResults" : maxResults, 
           "showChildCount" : treeSettings['ent{0}childCount'.format(num)] 
          }; 
         } 
        } 
       } 
      } 
    }); 
} 

То, что я после, как обновить источник данных, а также в случае множественных вызовов (бывает часто) отменить предыдущие вызовы.

Answer 1

Вам нужно будет кэшировать ваш вызов ajax, а затем прервать его каждый раз, когда вы запускаете другой.

// On change, update tree 
$('#entitySelector1').change(function() { 
    .... 
    applyJstree(1); 
} 


var applyJstree = function(num) { 
    getAjaxDataForTree(num); 
} 


var xhr = false; 
function getAjaxDataForTree(num) { 
    if (xhr) { 
     xhr.abort(); // abort if ajax call is going on 
    } 

    // cache tree element to access it in the callback 
    var $jsTree = $('#ent{0}'.format(num)).jstree(); 

    // cache ajax call 
    xhr = $.ajax({ 
     type: ..., 
     url: ..., 
     success: function(data){ 
      $jsTree.settings.core.data = data; // update tree 
      $jsTree.refresh(); 
     } 
    }); 
} 

Demo - Fiddle Demo, но это jsTree v.3