4-States button (with .toggle()) and delayed Ajax in each state

Question

Hi, I've got a 4-states button. I would like to know how to delay the execution of my ajax request in order to have only one request at the end...

I mean, if I press the button twice, i don't want to execute the first ajax request, but only the second one after a specific timeout.

$('.btn_mark_erreur').toggle(
        function (){
//State 1
            var id_erreur = $(this).parent().attr('erreur_num');
            $(this).attr('title','Erreur réglée');
            $(this).children('img').attr('src','img/erreur_ok.png');


            setTimeout(function(){

                $.ajax({
                    type: 'POST',
                    url: "",
                    dataType: ($.browser.msie) ? "text" : "xml", 
                    data: "a=maj_statut&data="+donnees ,
                    succes : function(data) {
                    console.log(data);}

                });

            },1000);

        },
        function (){
//State 2
            var id_erreur = $(this).parent().attr('erreur_num');
            $(this).attr('title','Erreur en cours');
            $(this).children('img').attr('src','img/erreur_encours.png');

            setTimeout(function(){

                $.ajax({
                    type: 'POST',
                    url: "",
                    dataType: ($.browser.msie) ? "text" : "xml", 
                    data: "a=maj_statut&data="+donnees ,
                    succes : function(data) {
                    console.log(data);}

                });

            },1000);

        },
        function (){
//State 3
            var id_erreur = $(this).parent().attr('erreur_num');
            $(this).attr('title','Problème sur cette erreur');
            $(this).children('img').attr('src','img/erreur_nok.png');


            setTimeout(function(){

                $.ajax({
                    type: 'POST',
                    url: "",
                    dataType: ($.browser.msie) ? "text" : "xml", 
                    data: "a=maj_statut&data="+donnees ,
                    succes : function(data) {
                    console.log(data);}

                });

            },1000);
        },
        function (){
//State 0
            var id_erreur = $(this).parent().attr('erreur_num');
            $(this).attr('title','Marquer comme...');
            $(this).children('img').attr('src','img/erreur_statut.png');




            setTimeout(function(){

                $.ajax({
                    type: 'POST',
                    url: "",
                    dataType: ($.browser.msie) ? "text" : "xml", 
                    data: "a=maj_statut&data="+donnees ,
                    succes : function(data) {
                    console.log(data);}

                });

            },1000);


        }
    );

This code doesn't work, I've got a request for each state.

Thanks for your help!

Answer 1

setTimeout returns a value - an identifier of a timer. You can pass that value to clearTimeout to have the timer canceled. Example:

var timers = new Array(null, null, null, null);
function cancelRequestsUpTo(n) {
    for (int i = 0; i <= n; ++i)
        if (timers[i] != null) clearTimeout(timers[i]);
}

$("#btn_mark_error").toggle(function() {
    //...
    timers[0] = setTimeout(function() { $.ajax(...); }, 1000);
},
function() {
    timers[1] = ...;
    cancelRequestsUpTo(0);
},
....
);

Note that once $.ajax actually executes there is no way (at least no way I know of) that you can cancel the request already pending. What I suggest is only canceling the timers you already set up.