Sélection de cases à cocher multiples avec un délai pour vérifier les changements des autres cases à cocher

Question

Je suis obligé d'utiliser jQuery Mobile et j'ai quelques hésitations même si c'est un système très bien construit. Donc, j'ai un formulaire qui se soumet lorsque l'un des cases à cocher change. Le client veut que lorsque ils en cliquent un, la page attende un temps défini pour soumettre afin que si un autre est sélectionné, la demande précédente ne soit pas envoyée et la nouvelle le soit. C'est essentiellement pour le rendre moins instantané et permettre un filtrage/demandes plus efficaces. Mon code est comme suit:

$( 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('Changement de page.');

            sWaves = "";

            // Formez la chaîne pour les vagues sélectionnées avec une logique standard pour vérifier si c'est le dernier élément pour la génération de virgules.

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

                var $this = $(this);

                var iIndex = v.value;

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

            } );

            console.debug("Vagues à sélectionner: " + sWaves);

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

                data: { Wave: sWaves },     // Soumettre la chaîne précédemment formée

                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();

    } );

} );

Le HTML pour le formulaire:

<% ' Mettez les scripts dont nous avons besoin ici pour qu'ils se chargent avec la page. %>

        Vagues: 
        />
        1 
        />
        2 
        />
        3 
        />
        4 

        Effacer  

J'ai besoin de retarder l'appel de $.mobile.changePage juste assez longtemps pour permettre aux autres cases à cocher liées (dans le même fieldset) d'être basculées également. Je vous remercie pour toute suggestion! C'est un sujet très important.

Answer 1

var minuterie;
var tempsAttente = 2000;
$Cboxes.change( function(event) {

 if(minuterie)clearTimeout(minuterie);

 minuterie = setTimeout(function(){
  //votre logique
  },tempsAttente);

 });

Lorsque l'événement de modification est déclenché, l'action à effectuer est programmée pour être exécutée après 2000ms, Si l'utilisateur change d'avis avant cela, il suffit de vider l'intervalle et d'en créer un nouveau

Answer 2

Le retard est facile à mettre en œuvre.

$(function() {
    var $form = $("form[name='Waves']"),
        $Cboxes = $("input[type='checkbox']", $form),
        timer = null,
        delay = 1000;

    $cboxes.not("#ClearAll").change(function() {

        // réinitialiser le minuteur actuel
        window.clearTimeout(timer);

        // créer un nouveau minuteur pour retarder la soumission du formulaire
        timer = window.setTimeout(function() {
            // obtenir toutes les cases à cocher sélectionnées sous forme de tableau
            // et créer une chaîne séparée par des virgules
            var sWaves = $cboxes.is(":checked").map(function(item){
                return item.value;
            }).join(",");
            $.mobile.changePage("default.asp", {
                // Soumettre la chaîne formée précédemment
                data: { Wave: sWaves },
                type: "post"
            });
        }, delay);
    });

    $("#ClearAll").change(function() {
        $cboxes.attr("checked", false).checkboxradio("refresh");

        $.mobile.changePage("default.asp", {
            data: { Wave: "" },
            type: "post"
        } );
    })
});

J'ai également pris la liberté de simplifier une partie de votre logique. En particulier, la création de chaînes semblait trop compliquée face à Array.join().