Jak prawidłowo odrzucać żądania ajaxowe

Question

Mam pole wyboru, niż można przełączać niektóre zachowania, jednak jeśli ktoś robi 100 kolejnych kliknięć, nie chcę wysyłać 100 żądań na moją stronę serwera.

To co mam w miejsce dotychczas (znaleziono ten fragment kodu):

deBouncer = function($,cf,of, interval){ 
    var debounce = function (func, threshold, execAsap) { 
     var timeout; 
     return function debounced() { 
      var obj = this, args = arguments; 
      function delayed() { 
      if (!execAsap) 
       func.apply(obj, args); 
      timeout = null; 
      } 
      if (timeout) 
      clearTimeout(timeout); 
      else if (execAsap) 
      func.apply(obj, args); 
      timeout = setTimeout(delayed, threshold || interval); 
     } 
    } 
    jQuery.fn[cf] = function(fn){ return fn ? this.bind(of, debounce(fn)) : this.trigger(cf); }; 
    }; 

W moim dokumencie gotowy funkcję:

deBouncer(jQuery,'smartoggle', 'click', 1500); 

Potem sam event:

$(window).smartoggle(function(e){ 
    MyToggleFunction(); 
}); 

Działa to tak, jakbym ustawił 1500 ms na okres rozwijania, więc jeśli klikniesz n razy przy 1500 ms, wyśle ​​tylko t on najpóźniej oznajmia serwerowi.

Istnieje jednak efekt uboczny tego, teraz moje zdarzenie click dla innych rzeczy jest pomieszane. Czy robię coś złego tutaj? Czy istnieje lepszy sposób na odrzucenie?

Answer 1

Nie jestem pewien, czy istnieje "właściwy" sposób, aby to zrobić.

Mimo, że podkreślenia ma takiego narzędzia, które stworzą debounced wersję swojej funkcji ...

var MyToggleDebounced = _.debounce(MyToggleFunction, 1500); 

następnie użyć MyToggleDebounced w click obsługi.

Link to debounce docs on underscorejs

Spójrz na adnotacjami źródło dla jak oni to robią.

Answer 2

Po prostu zrezygnuj z funkcji, która wykonuje rzeczywistą pracę i nie załadowałbym do tego całej biblioteki.

var debouncedSomeFunction = debounce(someFunction, 1500); 
 

 
debouncedSomeFunction(); 
 
debouncedSomeFunction(); 
 
debouncedSomeFunction(); 
 

 
setTimeout(debouncedSomeFunction, 2000); 
 

 

 
function debounce(fn, bufferInterval) { 
 
    var timeout; 
 

 
    return function() { 
 
    clearTimeout(timeout); 
 
    timeout = setTimeout(fn.apply.bind(fn, this, arguments), bufferInterval); 
 
    }; 
 

 
} 
 

 
function someFunction() { 
 
    log('someFunction executed'); 
 
} 
 

 
function log(text) { 
 
    document.body.appendChild(document.createTextNode(text)); 
 
    document.body.appendChild(document.createElement('br')); 
 
}

Answer 3

Myślę, że to pytanie jest lepiej niż się wydaje w pierwszej kolejności. Istnieje pewne zastrzeżenie dotyczące sposobu działania żądań Ajax HTTP. Jeśli ustawisz opóźnienie na 1500ms i będziesz mógł zagwarantować, że każde żądanie zostanie dostarczone w tym czasie, inne odpowiedzi będą działały dobrze. Jeśli jednak jakakolwiek prośba znacznie zwolni, żądania mogą się nie udać. Jeśli tak się stanie, ostatnim przetworzonym żądaniem jest ten, dla którego będą wyświetlane dane, a nie ostatni wysłany.

Napisałem tę klasę, aby uniknąć tego zastrzeżenie (w maszynopisie, ale powinieneś być w stanie go odczytać):

export class AjaxSync { 

    private isLoading: boolean = false; 
    private pendingCallback: Function; 
    private timeout; 

    public debounce(time: number, callback: Function): Function { 
    return this.wrapInTimeout(
     time, 
    () => { 
     if (this.isLoading) { 
      this.pendingCallback = callback; 
      return; 
     } 
     this.isLoading = true; 
     callback() 
      .then(() => { 
      this.isLoading = false; 
      if (this.pendingCallback) { 
       const pendingCallback = this.pendingCallback; 
       this.pendingCallback = null; 
       this.debounce(time, pendingCallback); 
      } 
      }); 
     } 
    ); 
    } 

    private wrapInTimeout(time, callback) { 
    return() => { 
     clearTimeout(this.timeout); 
     this.timeout = setTimeout(callback, time); 
    }; 
    } 
} 

Zapobiegnie to dwa Ajax żądania zrealizowane w tym samym czasie i to wyśle ​​kolejny Żądaj, jeśli jest oczekująca.