多個複選框選擇與延遲檢查其他複選框更改

Question

我被迫利用jQuery Mobile和我有一些猶豫，即使它是一個非常良好的系統。所以，我有一個表單，當任何複選框更改時提交。客戶端需要它，以便當他們單擊頁面時等待提交一段時間，所以如果選擇了另一個頁面，則先前的請求不會被觸發，新的請求也不會被觸發。它本質上是使它不那麼即時，並允許更有效的過濾/請求。我的代碼是像這樣：

$(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調用足夠長的時間，以允許其他相關的複選框（在同一字段集內）也被切換。我感謝任何輸入！這是一件非常重要的事情。

Answer 1

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

if(timer)clearTimeout(timer); 

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

}); 

在變更事件被觸發要執行計劃。如果用戶改變主意beforË剛清除的時間間隔，使2000毫秒去後， 一個新

Answer 2

延遲是很容易的動作實行。

$(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()面前，創建字符串似乎過於複雜。