Reduce server requests made by AJAX

Question

I have a slider component which calls an AJAX request to update a table based on the values the slider is pointing too.

On my local server, not implementing a delay function seemed fine, but since deploying my code onto a cloud service I've noticed there is a significant amount of lag generated by the amount of requests sent to the server when a user is sliding.

My current code:

$( "#psi_slider" ).slider({
    range: "min",
    value:0,
    min:0,
    max:max_psi, 
    slide: function(event, ui) {
        update_results(json, get_values());
    }
});

Could anyone advise how I could implement a timer between requests, ie send a request every second?

Answer 1

This scenario is very similar to that in which a user types on a field and you want to update data/provide as the user types, but not necessarily every time that the user presses a key.

There are three approaches to this situation:

Approach 1: update every single time that something gets changed

This can possibly be a doable approach when "something gets changed" means "the user presses a key" but definitely not when it means "the slider moves a tiny bit" which is your case.

...

whenSomethingChanges : function(){
    updateData();
}

...

function updateData(){
    // Make your ajax call
}

Fiddle

Approach 2: wait until things stop changing, then update

That is, when the user stops typing or stops moving the slider for some time, update your data. In the case of the slider this approach suffice to drastically reduce the amount of Ajax calls. However, it has the obvious downside that, if the user does not stop moving things around, he/she will not see the results of his/her actions and may become frustrated.

var timeout = 500; // half a second
var scheduler = new Scheduler(updateData, timeout);

...

whenSomethingChanges: function(){
    scheduler.updateDataInAWhile();
}

...

function Scheduler(callback, timeout){

    this.callback = callback;
    this.timeout = timeout;
    this.updateDataTimeout = null;

    this.updateDataInAWhile = function(){

        if(this.updateDataTimeout){
            clearTimeout(this.updateDataTimeout);
        }

        var self = this;
        this.updateDataTimeout = setTimeout(function(){
            self.callCallback();
        }, this.timeout);
    };

    this.callCallback = function(){
        if($.isFunction(this.callback)){
            this.callback();
        }
    } 
}

function updateData(){
    // Make your ajax call
}

Fiddle

Approach 3: update periodically while things keep changing

The title says it all. This will put a limit on the frequency Ajax calls while at the same time providing feedback to the user in a continuous manner.

var timeout = 500; // half a second
var scheduler = new Scheduler(updateData, timeout);

....

whenSomethingChanges: function(){
    scheduler.keepUpdating();
}

...

function Scheduler(callback, timeout) {

    this.callback = callback;
    this.timeout = timeout;
    this.currentlyUpdating = false;
    this.finalTimeout = null;

    this.keepUpdating = function(){
        if(!this.currentlyUpdating){
            this.startPeriodicUpdate();
        }

        if(this.finalTimeout){
            clearTimeout(this.finalTimeout);
        }
        var self = this;
        this.finalTimeout = setTimeout(function(){
                self.discontinueUpdates();
            }, this.timeout);
    };

    this.startPeriodicUpdate = function(){
        this.currentlyUpdating = true;        
        this.runPeriodicUpdate();
    };

    this.runPeriodicUpdate = function(){

        if($.isFunction(this.callback)){
            this.callback();
        }

        var self = this;
        if(this.currentlyUpdating){
            setTimeout(function(){
                self.runPeriodicUpdate()
            }, self.timeout);
        }
    };

    this.discontinueUpdates = function(){
        this.currentlyUpdating = false;
    };
}

Fiddle