3

私は jQuery Mobile を利用せざるを得なくなっており、非常によく構築されたシステムであるにも関わらず、いくつかためらいがあります。したがって、チェックボックスのいずれかが変更されたときに送信されるフォームがあります。クライアントは、1 つをクリックするとページが設定された時間送信を待機するようにしたいので、別のリクエストが選択された場合、前のリクエストは起動されず、新しいリクエストは起動されます。基本的に、即時性を低くし、より効率的なフィルタリング/リクエストを可能にするためです。私のコードは次のようになります:

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

    } );

} );

フォームの HTML:

<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>

$.mobile.changePage他の関連するチェックボックス (同じフィールドセット内) も切り替えることができるように、呼び出しを遅らせる必要があります。ご意見をお待ちしております。これは非常に重要な問題です。

4

2 に答える 2

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

 if(timer)clearTimeout(timer);

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

 });

変更イベントが発生すると、実行されるアクションは 2000 ミリ秒後にスケジュールされます。ユーザーがその前に気が変わった場合は、間隔をクリアして新しい間隔を作成します

于 2012-07-18T22:38:10.033 に答える
0

遅延は簡単に実装できます。

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

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

        // reset the current timer
        window.clearTimeout(timer);

        // create a new timer to delay form submission
        timer = window.setTimeout(function() {
            // get all the selected checkboxes as an array
            // and create a comma separated string
            var sWaves = $cboxes.is(":checked").map(function(item){
                return item.value;
            }).join(",");
            $.mobile.changePage("default.asp", {
                // Submit the previously formed string
                data: { Wave: sWaves },
                type: "post"
            });

        }, delay);
    });


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

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

また、ロジックの一部を単純化するために自由を取りました。特に文字列の作成は、 に直面して複雑すぎるように見えましたArray.join()。

于 2012-07-18T22:50:22.270 に答える