Abbrechen eines früheren Jquery-Formulars beim Übermitteln der Nachricht

Question

Ich habe ein Suchformular, das ich versuche, dynamisch zu schreiben. Auf Key-up sende ich das Formular. Ich stoße jedoch auf Probleme mit großen Datensätzen. Das Problem besteht darin, dass jede Formularübergabe immer ein Ergebnis zurückgibt und dieses Ergebnis immer in das DOM eingefügt wird. Wenn ich zum Beispiel das vierte Zeichen in keyup eintippe, übergibt es das Formular und gibt 100 übereinstimmende Ergebnisse zurück. Wenn Sie das fünfte Zeichen eingeben, werden nur 2 Ergebnisse zurückgegeben. Die Ausführungszeit des fünften Zeichens kehrt schneller als die vierte zurück. Also was passiert, ist, dass es die 2 Ergebnisse im DOM malt und dann die 4 zurückgibt und die 100 Ergebnisse in das DOM malt.

Gibt es eine Möglichkeit zum Abbrechen oder Ignorieren der vorherigen Formular-Post-Ergebnisse, wenn ein Keyup-Ereignis nach dem Senden passiert? Hier ist die Form und die einreichen über Javascript

@using (Ajax.BeginForm(new AjaxOptions 
{ 
    HttpMethod = "get", 
    InsertionMode = InsertionMode.Replace, 
    UpdateTargetId = "Breweries" 
})) 
{ 
    <input id="brewerySearchInput" class="form-control page-header-input" placeholder="Search" type="search" name="searchTerm" /> 
} 

<script> 
    $("#brewerySearchInput").keyup(function() { 
     if ($(this).val().length >= 3 || $(this).val().length == 0) { 
      $('#form0').delay(200).submit(); 
     } 
    }); 
</script> 

Answer 1

Ich denke, Ihnen ein klassischer Fall ist debounce Funktion zu verwenden.

Entprellung erzwingt, dass eine Funktion erst wieder aufgerufen wird, nachdem eine bestimmte Zeit verstrichen ist, ohne dass sie aufgerufen wurde. Wie in „führen Sie diese Funktion nur, wenn 100 Millisekunden vergangen sind, ohne sie aufgerufen wird.

werden Sie sonst viele unnötige Backend-Anforderungen machen werden. Check it out https://davidwalsh.name/javascript-debounce-function

Answer 2

@bhabisha Kumar diese auf den Kopf genagelt . die Entprellfunktion ist genau das, was ich den Code zu bekommen benötigt. hier arbeiten die abschließende Bearbeitung Code.

<script> 

    function debounce(func, wait, immediate) { 
     var timeout; 
     return function() { 
      var context = this, args = arguments; 
      var later = function() { 
       timeout = null; 
       if (!immediate) func.apply(context, args); 
      }; 
      var callNow = immediate && !timeout; 
      clearTimeout(timeout); 
      timeout = setTimeout(later, wait); 
      if (callNow) func.apply(context, args); 
     }; 
    }; 

    var myEfficientFn = debounce(function() { 
     if ($(this).val().length >= 3 || $(this).val().length == 0) { 
      $('#form0').submit(); 
     } 

    }, 300); 

    $("#brewerySearchInput").keyup(myEfficientFn); 
</script>