-1

Using jQuery I'm writing a website api call in Javascript, which so far works pretty well. When a person updates a number in a text input it does a call to the API and updates a field with the response. It gets problematic however, when I user quickly makes a lot of changes. The javascript then seems to pile up all queries, and somehow does them side by side, which gives the field to be updated kind of a stressy look.

I think one way of giving the user a more relaxed interface, is to only start the API call after the user finished editing the input field for more than half a second ago. I can of course set a timeout, but after the timeout I need to check if there is not already a call under way. If there is, it would need to be stopped/killed/disregarded, and then simply start the new call.

First of all, does this seem like a logical way of doing it? Next, how do I check if a call is underway? And lastly, how do I stop/kill/disregard the call that is busy?

All tips are welcome!

[EDIT] As requested, here some of the code I already have:

function updateSellAmount() {
    $("#sellAmount").addClass('loadgif');
    fieldToBeUpdated = 'sellAmount';
    var buyAmount = $("#buyAmount").val();
    var sellCurrency = $("#sellCurrency").val();
    var buyCurrency = $("#buyCurrency").val();

    var quoteURL = "/api/getQuote/?sellCurrency="+sellCurrency
        +"&buyAmount="+buyAmount
        +"&buyCurrency="+buyCurrency;

    $.get(quoteURL, function(data, textStatus, jqXHR){
        if (textStatus == "success") {
            $("#sellAmount").val(data);
            $("#sellAmount").removeClass('loadgif');
        }
    });
    if (fieldToBeUpdated == 'sellAmount') {
        setTimeout(updatesellAmount, 10000);
    }
}

$("#buyAmount").on("change keyup paste", function(){
    updateSellAmount();
});
kramer65
  • 50,427
  • 120
  • 308
  • 488
  • Show some code. In general, assuming you are using `$.ajax`, the deferred object returned from that can be stored in a variable so you can check it later (using `.state()`) to see if it's resolved and/or chain later calls onto so that they stay in order. – Matt Burland Feb 20 '14 at 20:39
  • 1
    possible duplicate of [How do I know if jQuery has an Ajax request pending?](http://stackoverflow.com/questions/1822913/how-do-i-know-if-jquery-has-an-ajax-request-pending) – Patrick Q Feb 20 '14 at 20:41
  • @PatrickQ - The thing is that the question you're referring to, has an option to check if any requests are pending, but gives no solution to how to stop or disregard that pending request and substitute it for the new request. – kramer65 Feb 20 '14 at 20:56
  • 1
    @kramer65 You might also check out [this post](http://stackoverflow.com/questions/3312960/jquery-abort-ajax-request-before-sending-another) if you haven't already. – Patrick Q Feb 20 '14 at 21:10

1 Answers1

1

If you make your AJAX call like this:

var myAjaxDeferred = $.ajax("....");

You can check it later with:

if (myAjaxDeferred.state() === "pending") {
    // this call is still working...
}
Matt Burland
  • 44,552
  • 18
  • 99
  • 171
  • Thanks for the tip! But how would I stop/kill/disregard it so that it doesn't update the textfield anymore? – kramer65 Feb 20 '14 at 20:52
  • @kramer65: In your callback you could add checks to see if the returned data is still relevant. – Matt Burland Feb 20 '14 at 20:56
  • The only way of knowing if it is still relevant, is by checking if a request has been made after this request was done. Do I need to start creating a list of timestamps or something? That just doesn't seem like the obvious option. – kramer65 Feb 20 '14 at 20:58
  • @kramer65: without knowing more about what you are doing, I can't tell you. If the api you are calling echos back the parameters you sent it you could compare them to the last set you sent. Or if it returns some kind of timestamp, you could use that. – Matt Burland Feb 20 '14 at 21:04
  • I added some code to my initial question. Does that help? I also control/build the API, so I can change it if needed, but I'd rather don't since it's such a simple setup now. – kramer65 Feb 20 '14 at 21:09
  • Looking at your edit, this could be as simple as comparing the url's of the last request you made to the url in the callback. – Matt Burland Feb 20 '14 at 21:20