jQuery Knob, Submit only on last change/release

Question

I am using jQuery Knob by anthonyterrien with step set to 20. I want to submit the value of the knob to the server. Problem is that change functions is called every time the user moves the knob using right click or left click(release is called only once if click is used ), and release is called every time the user uses scroll on knob. I want to somehow minimize or possible make only a single ajax call to the server, considering that the user is playing with the control.

here is the knob html :

<input class="knob" id="knob_imgid1" data-entryid="knob_imgid1" data-angleOffset=-125 data-angleArc=250 data-step="20" data-displayInput=false data-width="100%" data-fgColor="#428BCA" data-skin="tron" data-thickness=".1" value="20" />

Knob jquery :

$(".knob").knob({ 
        change: function (value) {
            value = parseInt(value, 10); 
        }
        release: function (value) {
            value = parseInt(value, 10); 
        }
});

result i desire :

$(".knob").knob({ 
        change: function (value) {
            //make an ajax call only the last time when this function was called
        }
        release: function (value) {
            //make an ajax call only the last time when this function was called
        }
});

The call results : http://i.stack.imgur.com/RS7S4.png 1

Ultimately i want to minimize ajax calls or make a call once to send value:40 to the server (as per the image result)

Answer 1

You can test if the current value = the final value, store the finalValue in your html element:

<input class="knob" .... data-finalValue="20" />

And get it in the Javascript:

$(".knob").knob({ 
     change: function (value) {
        var finalValue = parseInt($(this).data("finalValue"));
        if (value === finalValue)
             // Last call => Ajax call
     }
});

Answer 2

Thankyou all, for your quick responses. I created an solution(with a bit.. help from @Adriien M) which minimize the ajax calls using the timeout function

Please let me know if there is better solution than this.

Here is the code:

var sec3lastvalue = 0;
var sec5lastvalue = 0;

function sec5functioncheck(passedvalue) {
    console.log("5Sec Check : Value=" + passedvalue);
    sec5lastvalue = passedvalue;
    if (sec5lastvalue === sec3lastvalue) {
        console.log("Make Ajax Call, Send:" + passedvalue);
    }
}

function sec3functioncheck(passedvalue) {
    console.log("3Sec Check : Value=" + passedvalue);
    sec3lastvalue = passedvalue;
}

var oldvalue = 0;
$(".knob").knob({ 
        release: function (value) {
           value = parseInt(value, 10);
           if (oldvalue != value) {
             setTimeout(function () {
                sec3functioncheck(value);
             }, 3000);
             setTimeout(function () {
                sec5functioncheck(value);
             }, 5000);
           }
           oldvalue = value; 
        }
});

Here is the result: [ http://i.stack.imgur.com/NtcXk.png]