節流一個Ajax實況搜索功能

我想掐死我寫了下面的AJAX實時搜索功能。節流一個Ajax實況搜索功能

我說得那麼，如果是進入了一個最小的2個字符的請求後，纔會發送。我也想扼殺ajax四分之一秒，讓用戶有機會輸入他們想要的東西。我將ajax包裝在setTimeout函數中，但這不起作用。

 $('#search').keyup(function() { 
      var string = $(this).val(); 
      if (string.length >= 2) { 
       $.ajax({ 
        'type': 'GET', 
        dataType: 'html', 
        'url': url, 
        'success': function(data){ 
            // show the search data 
        } 
       });            
      } else if (string.length <= 1) { 
         // restore page content as of when it was loaded 
      } 
     });

我應該問的另一件事，我應該緩存ajax的結果，不是嗎？

來源

2011-08-06 Mohamad

我看到你的代碼中沒有'setTimeout'。 –

我把它拿出來，因爲它導致了一個錯誤。 – Mohamad

這是我們很難告訴你_why_這是造成一個錯誤，如果我們不能看到你做了什麼。 –

只需將代碼：

var elem = $(this); 
// save newest search 
elem.data('search',search) 
// clear pending searches 
.clearQueue().stop() 
// waits 
.delay(250) 
// runs search 
.queue(function() { 
    $.ajax({ 
     'type': 'GET', 
     dataType: 'html', 
     'url': url, 
     'success': function(data){ 

     // check if can be run 
     if(elem.data('search') != search) 
      return; 

       // show the search data 
     } 
    }); 
});

來源

2011-08-06 03:20:59

謝謝。這是一個開始。它似乎適用於第一次請求，但後來的似乎並沒有影響。例如，如果我輸入duty'的'呼叫真快，我結束了三個請求時的延遲時間在1000 ...沒辦法我花時間比擊鍵之間的第二。 – Mohamad

我忘了添加停止（），那應該修復時間問題 –

我已經添加處理後續ajax調用 –

查看（或考慮使用）的源代碼Jquery Autocomplete它幾乎完全符合您的要求，它只在暫停後提交數據以確保用戶已完成，並且其中包含緩存特徵。裏面if (string.length >= 2)

來源

2011-08-06 03:17:07

既然你已經在使用jQuery，我會用這個。否則，你需要使用setTimeout和clearTimeout以確保您取消setTimeout如果用戶仍輸入數據（否則的setTimeout將始終運行）。 – Kris

節流一個Ajax實況搜索功能

回答

相關問題