AngularJS - Bir sözün iptali nasıl yapılır?

Question

Diyelim ki, değiştiğinde, bir isteği tetikleyecek ve bazı sonuçları gösterecek bir giriş metni alanına (daha çok Google arama alanı gibi) sahip olduğumu varsayalım. Örneğin

, girişteki Dog yılında

edelim türü: Şimdi

typed D -> Calls ctrl.search('D') -> Makes a request -> Changes model when success 
typed DO -> Calls ctrl.search('DO') -> Makes a request -> Changes model when success 
typed DOG -> Calls ctrl.search('DOG') -> Makes a request -> Changes model when success. 

, en DO isteği sonra DOG birden tepki diyelim. Modelim, DOG yazmış olsam bile DO sonuçlarıyla sonuçlanacaktır.

Bu nedenle, karakterleri yazmaya devam edersem devam eden devam eden istekleri iptal etmenin veya iptal etmenin bir yoluna ihtiyacım var. Bu şekilde, modelim sadece son istekle değiştirildi.

Benim girdi benziyor aşağıdadır: Burada

<input type="text" class="form-control" data-ng-model="query" data-ng-change="ctrl.search(query)" placeholder="Search" /> 

olan benim searchCtrl.js: Bunun gibi

var search; 
var language; 
var _this; 

var SearchCtrl = function (searchService, lang) 
{ 
    search = searchService; 
    langauge = lang; 
    _this = this; 
} 

SearchCtrl.prototype.search = function (text) 
{ 
    var promise = search.language(language) 
        .facet('characters') 
        .highlight('quotes') 
        .query(text); 

    promise.then(function (response) { 
     if(!response) return; 
     _this.total = response.total; 
     _this.count = response.found; 
     _this.result = response.data; 
    }); 
} 

Answer 1

Genellikle bu vaka için insanlar ng-model-options={debounce: 100}'u kullanır.

https://docs.angularjs.org/api/ng/directive/ngModelOptions

zaten sen sözünü reddedebilir.

Answer 2

: $q.reject(response);

teknik olarak ne kadar yukarıda yorumcu doğru olduğuna inanıyoruz, size Aslında söz vermeyi reddediyor ve gerçekten iptal etmiyor.

Answer 3

Bu durumda debounce tekniğini kullanmak ister misiniz?

bkz:

• https://docs.angularjs.org/api/ng/directive/ngModelOptions

• http://ilikekillnerds.com/2014/12/increasing-angular-performance-by-debouncing-your-ng-model-updates/

  <input type="text" 
      class="form-control" 
      data-ng-model="query" 
      data-ng-change="ctrl.search(query)" 
      placeholder="Search" 
      ng-model-options="{ debounce: { 'default': 500, 'blur': 0 } }"  
  />