Question

I am being forced to utilize jQuery Mobile and I have some hesitations even though it’s a very well-constructed system. So, I have a form that submits when any of the checkboxes change. The client wants it so that when they click one the page waits to submit for a set time so if another one is selected the previous request does not get fired and the new one does. It’s essentially to make it less instantaneous and allow for more efficient filtering/requests. My code is like so:

$( function() {

    var sForm = "form[name='Waves']",
        sCboxes = "input[type='checkbox']",
        sWaves = "";

    var $Cboxes = $(sForm + " " + sCboxes),
        sChecked = sCboxes + ":checked";

    $Cboxes.change( function(event) {

        var $this = $(this);

        if ( $this.attr("id") != "ClearAll" ) {

            console.debug($(this));

            console.debug('Changing page.');

            sWaves = "";

            // Form the string for the selected waves with standard check-if-it's-the-last
            // element logic for comma generation.

            $.each( $(sChecked) , function(i, v) {

                var $this = $(this);

                var iIndex = v.value;

                sWaves += iIndex + ( ( i == $(sChecked).length - 1 ) ? "" : "," );

            } );

            console.debug("Waves to select: " + sWaves);

            $.mobile.changePage("default.asp", {

                data: { Wave: sWaves },     // Submit the previously formed string

                type: "post"

            } );

            //$(sForm).submit();

        } else {

            $(sChecked).add( $(this) ).attr("checked", false).checkboxradio("refresh");

            $.mobile.changePage("default.asp", {

                data: { Wave: "" },

                type: "post"

            } );

        }

    } );

    $("#ClearAll").click( function(event) {

        event.preventDefault();

    } );

    $(".slideout").click( function(){

        $(this).parents(".ui-collapsible").find(".ui-icon-minus").click();

    } );

} );

The HTML for the form:

<form ACTION="<%=ASP_SELF()%>" ID="Waves" METHOD="post" NAME="Waves">

<% ' Put the scripts we need here so that it loads with the page. %>
<script SRC="/base/scripts/scripts.js"></script>

<fieldset DATA-ROLE="controlgroup" DATA-TYPE="horizontal" STYLE="margin-left:5px; margin-bottom:0px; ">
       <input TYPE="checkbox" NAME="#" ID="#" VALUE="Select Waves" CLASS="custom"   />
       <label CLASS="no-hover" FOR="#">&nbsp;Waves:&nbsp;</label>
       <input TYPE="checkbox" NAME="Wave1" ID="Wave1" VALUE="1" CLASS="custom" STYLE="width:70px !important; " <% If Instr(request("Wave"),"1") OR WaveOne = "YES" Then response.write " checked=""checked""" End If %> />
       <label FOR="Wave1">&nbsp;1&nbsp;</label>
       <input TYPE="checkbox" NAME="Wave2" ID="Wave2" VALUE="2" CLASS="custom" STYLE="width:70px !important; " <% If Instr(request("Wave"),"2") OR WaveTwo = "YES" Then response.write " checked=""checked""" End If %> />
       <label FOR="Wave2">&nbsp;2&nbsp;</label>
       <input TYPE="checkbox" NAME="Wave3" ID="Wave3" VALUE="3" CLASS="custom" STYLE="width:70px !important; "<% If Instr(request("Wave"),"3") OR WaveThree = "YES" Then response.write " checked=""checked""" End If %> />
       <label FOR="Wave3">&nbsp;3&nbsp;</label>
       <input TYPE="checkbox" NAME="Wave4" ID="Wave4" VALUE="4" CLASS="custom" STYLE="width:70px !important; "<% If Instr(request("Wave"),"4") OR WaveFour = "YES" Then response.write " checked=""checked""" End If %> />
       <label FOR="Wave4">&nbsp;4&nbsp;</label>

       <input TYPE="checkbox" NAME="ClearAll" ID="ClearAll" VALUE="Clear" CLASS="custom" $('input[data-type="search"]').TRIGGER("CHANGE").VAL(""); />
       <label FOR="ClearAll">&nbsp;Clear&nbsp;&nbsp;</label>
</fieldset>
    </form>

I need to delay the $.mobile.changePage call just long enough to allow for the other related checkboxes (within the same fieldset) to be toggled as well. I appreciate any input! It’s a very important matter.

Answer 1

var timer;
var waitTime = 2000;
$Cboxes.change( function(event) {

 if(timer)clearTimeout(timer);

 timer = setTimeout(function(){
  //your logic
  },waitTime);

 });

When change event is fired the action to be performed is scheduled to go after 2000ms,
If user changes mind befor e that just clear the interval and make a new one