jQuery的$計數器

我正在當數據在文本輸入鍵入運行此代碼。每次循環：

$("input#search").live("keyup", function(e) {  
     var search_string = $(this).val(); 
     var i = 0; 
     var trHTML = ''; 
     if(search_string !== '') { 
      $.ajax({ 
       type: "POST", 
       dataType: "json", 
       url: "/section/search_go", 
       data: { query: search_string }, 
       cache: false, 
       success: function(response) { 
        $.each(response, function(i, item) { 


         trHTML += '<tr>'; 
         trHTML += '<td>' + item.accountnumber + '</td>'; 
         trHTML += '<td>' + item.company + '</td>'; 
         trHTML += '<td>' + item.phone + '</td>'; 
         trHTML += '<td>' + item.postcode + '</td>'; 
         trHTML += '</tr>'; 
        }); 
        $('#customers').html(trHTML); 
       } 
      }); 
      console.log(i); 
     } 

     /*if(counter === 0 || search_string == '') { 
      $('#customers').html('<tr><td colspan="4">No Results</td></tr>'); 
     }*/ 
    });

我試圖獲得在$.each循環記錄的數目，但我似乎無法做到這一點。

我一直在使用i這是在功能試過，我也嘗試添加一個counter變量，每個循環我加入counter++但仍然心不是工作

來源

2016-03-03 charlie

我希望，如果你需要得到的次數循環運行，

只需做response.length。兩者將是相同的。

$("input#search").live("keyup", function(e) {  
     var search_string = $(this).val(); 
     var resultLength; //Declare variable 
     var i = 0; 
     var trHTML = ''; 
     if(search_string !== '') { 
      $.ajax({ 
       type: "POST", 
       dataType: "json", 
       url: "/section/search_go", 
       data: { query: search_string }, 
       cache: false, 
       success: function(response) { 
        resultLength = response.length; //assign the length 
        $.each(response, function(i, item) { 


         trHTML += '<tr>'; 
         trHTML += '<td>' + item.accountnumber + '</td>'; 
         trHTML += '<td>' + item.company + '</td>'; 
         trHTML += '<td>' + item.phone + '</td>'; 
         trHTML += '<td>' + item.postcode + '</td>'; 
         trHTML += '</tr>'; 
        }); 
        $('#customers').html(trHTML); 
       } 
      }); 
      console.log(i); 
     } 

     /*if(resultLength === 0 || search_string == '') { //access here 
      $('#customers').html('<tr><td colspan="4">No Results</td></tr>'); 
     }*/ 
    });

來源

2016-03-03 13:29:05

不要ü有任何具體方案使用計數器 –

計算試着用'的console.log（response.log）代替我'的console.log（我）''但我得到'未捕獲的ReferenceError：響應沒有定義' – charlie

在JavaScript變量中是有區間的，因此無法訪問成功塊的響應， –

console.log（i）必須位於每個函數的內部。

success: function(response) { 
       $.each(response, function(i, item) { 


        trHTML += '<tr>'; 
        trHTML += '<td>' + item.accountnumber + '</td>'; 
        trHTML += '<td>' + item.company + '</td>'; 
        trHTML += '<td>' + item.phone + '</td>'; 
        trHTML += '<td>' + item.postcode + '</td>'; 
        trHTML += '</tr>'; 
        console.log(i); // this "i" from here function(i, item) 
       });

來源

2016-03-03 13:34:26

與方法的主要問題是，$.ajax()電話是異步 [1]。這是Web開發中非常重要的一部分：AJAX請求（以及一般的HTTP請求）可能需要很長時間（偶爾大約30秒或更長），如果您的JavaScript代碼被阻止等待它完成，整個瀏覽器都會鎖定。（請參閱更多關於這方面的詳細信息鏈接的MDN文章的文章。）

這意味着什麼，你是依賴於從$.ajax()要求結果的任何代碼必須從被運行success回調函數中被觸發當HTTP請求成功返回數據時。

對您的代碼的另一個評論，與您的問題無關：您目前正在對每個keyup事件發出HTTP請求。這是真的減慢你的頁面，它可以超載你的服務器，它可以導致競爭條件和其他類型的錯誤，如果事情不完美（記住，HTTP有點不可預知）。你應該去掉你的事件處理程序。使用Ben Alman的jquery throttle/debounce插件[2]來消除你的處理器（見下面的例子）。（您可能也想將其更改爲keypress事件，雖然這不是必要的; keypress事件對象只包含一些額外的信息，有時可能會有所幫助。）

我會推薦類似這樣的東西（假設您已經包括一些jQuery插件給你$.debounce()）：

$("input#search").live(
    "keypress", // changed keyup to keypress; not necessary, but often preferred 
    $.debounce(
     250, // debounced by 250ms; might want longer, but I wouldn't go any less 
     function(e) { 
      var search_string = $(this).val(), 
       no_results_str = '<tr><td colspan="4">No Results</td></tr>'; 
      if (search_string === '') { 
       $('#customers').html(no_results_str); 
      } 
      else { 
       if(search_string !== '') { 
        $.ajax({ 
         type: "POST", 
         dataType: "json", 
         url: "/section/search_go", 
         data: { query: search_string }, 
         cache: false, 
         success: function(response) { 
          console.log('Got '+response.length+' results'); 
          if(response.length === 0) { 
           $('#customers').html(no_results_str); 
          } 
          else { 
           var trHTML = ''; 
           $.each(response, function(i, item) { 

            trHTML += '<tr>'; 
            trHTML += '<td>' + item.accountnumber + '</td>'; 
            trHTML += '<td>' + item.company + '</td>'; 
            trHTML += '<td>' + item.phone + '</td>'; 
            trHTML += '<td>' + item.postcode + '</td>'; 
            trHTML += '</tr>'; 
           }); 
           $('#customers').html(trHTML); 
          } 
         } 
        }); 
       } 
      } 
     } 
    ) 
);

鏈接：

來源

2016-03-03 15:16:26

jQuery的$計數器

回答

相關問題