Wie kann ich den letzten Aufruf eines jsTree (mit $ .jstree()) abbrechen?

Question

Verwenden von jsTree 1.0-rc3

Mit JS-Struktur habe ich eine Dropdown-Refiner. Dadurch wird der geladene Inhalt in den Baum geladen. Aber bei jedem Aufruf wird der Baum aktualisiert, ohne den letzten Anruf abzubrechen, so dass Sie in der Baumstruktur alte Anrufe anzeigen können, wenn sie nach dem neueren Anruf zurückkehren.

Wie kann ich den letzten Anruf abbrechen?

// 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)] 
          }; 
         } 
        } 
       } 
      } 
    }); 
} 

Was ich nach ist, wie ich die Datenquelle aktualisiere, und im Falle von mehreren Anrufen (kommt oft vor), um die vorherigen Anrufe abbrechen.

Answer 1

Sie müssen Ihren Ajax-Anruf zwischenspeichern und dann jedes Mal, wenn Sie einen anderen starten, abbrechen.

// 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, aber das ist jsTree v.3