CODEWITHSUNDEEP
javascriptajaxextjs
user6869920
user6869920

Reputation:

Extjs ajax request is returning in a disorderly manner

My application performs a code for query. The user enters the 3947 code.

For each type a query in this case four querys. But as the request is asynchronous, there is sometimes the last to arrive before others. So it happens that the last record returned is 394 instead of 3947

How to ensure that the last appointment will come last?

listeners: {
    change: function (sender, newValue, oldValue, eOpts) {
        loadData();
    }
}

Upvotes: 1

Views: 63

Answers (2)

Sr Julien
Sr Julien

Reputation: 494

In a simplified way you could ignore all requests and perform only the last in this way:

listeners: {
    change: function (sender, newValue, oldValue, eOpts) {
        if (call_request) clearTimeout(call_request);       
        call_request = setTimeout(loadData, 750);
}}

Upvotes: 1

abeyaz
abeyaz

Reputation: 3164

Very simple with extjs, you can use buffers. For example, the following code will create a buffer interval of 500 milliseconds before you type new letter to wait for firing 'change' event. So, if you type fast enough, it wont fire change event until you finish. You can play with the amount of buffer as you wish

listeners: {
  change: {
     buffer: 500,
     fn: function (sender, newValue, oldValue, eOpts) {
         loadData();
     }
  }

EDIT: I read your post again, and i might be misunderstood. So i am giving solution for another case which might be your problem. If you are sending AJAX requests for each number typed, since it is async you cant know which will arrive when. But you certainly prevent that with some simple code change. You can use promises for example, this should work:

// lets define loadData (just an example)
var job = new Promise(function(resolve, reject){
     resolve();
});

var loadData = function(){
     return new Promise(function(resolve, reject){
          // do your job and when it finishes(can be async), call resolve
          // ...
          resolve();
     });
};

// listener
change: function(){
    job = job.then(function(){
        return loadData();
    });
}

Upvotes: 0

Related Questions