2009-11-18 17 views
2
$(document).ready(function() { 

    $('#domain').change(function() { 

     // 

    }); 

}); 

change函數內的代碼基本上會發送ajax請求來運行PHP腳本。 #domain是一個文本輸入字段。所以基本上我想要做的就是發送一個Ajax請求作爲用戶類型在文本字段內的一些文本(例如搜索建議)。只有每個時間間隔jQuery事件

但是,我想設置一個時間間隔以減輕PHP服務器的負載。因爲如果每次用戶在文本字段中添加另一個字母時,jQuery都會發送AJAX請求,則會佔用大量帶寬。

所以我想設置讓我們說2秒作爲區間。每次用戶鍵入一個字母但最大頻率爲2秒時,AJAX請求將被觸發。

我該怎麼做?

+0

見http://stackoverflow.com/questions/1715399/javascript-觸發一個事件,發生在幾秒內,但是可以取消和http://stackoverflow.com/questions/1620602/javascript-jquery-make-an-ajax- request-when-a-user-is-typing-in-a-textarea和 – 2009-11-18 17:50:10

回答

2

你真正想要做的是檢查多長時間以來的最後變化事件使你保持事件之間的毫秒數的軌道,而不是使每2秒的電話。

$(document).ready(function() { 

    var lastreq = 0; //0 means there were never any requests sent 
    $('#domain').change(function() { 
     var d = new Date(); 
     var currenttime = d.getTime(); //get the time of this change event 
     var interval = currenttime - lastreq; //how many milliseconds since the last request 
     if(interval >= 2000){ //more than 2 seconds 
      lastreq = currenttime; //set lastreq for next change event 
      //perform AJAX call 
     } 

    }); 

}); 
+0

這不需要一個拖把功能來發送上次更新到服務器嗎? – Bell 2009-11-18 17:59:34

+0

@它沒有。它與更改事件相關聯,所以如果此更改事件距上次更改事件超過2秒,則它會發送該呼叫,否則它將忽略該事件。雖然我認爲@d的解決方案更加清潔,我認爲它是一個更好的解決方案。 – 2009-11-18 18:02:22

+0

如果我輸入兩個字符,並且第二個字符在它不應該發送的時間點擊,但是我從不輸入第三個字符再次觸發它呢? – 2009-11-18 18:20:50

5
$(document).ready(function() { 

    var ajaxQueue; 

    $('#domain').change(function() { 

     if(!ajaxQueue) { 
      ajaxQueue = setTimeout(function() { 
       /* your stuff */ 
       ajaxQueue = null; 
      }, 2000); 
     } 

    }); 

}); 
+0

ajaxQueue聲明在哪裏? – svinto 2009-11-18 17:53:09

+0

這隻會觸發一次。 – eduncan911 2009-11-18 17:54:41

+0

這就是輝煌,它在setTimeout中被定義。在此之前它將是未定義的(並且因此是錯誤的)。這與在'$(document).ready(...)'之前寫'var ajaxQueue = null;'效果相同。 – rfunduk 2009-11-18 17:55:52

7
$(function() { 
    var timer = 0; 
    $("#domain").change(function() { 
    clearTimeout(timer); 
    timer = setTimeout(function(){ 
     // Do stuff here 
    }, 2000); 
    }); 
}); 
0

不用在瀏覽器中試用此功能就可以了。事情是這樣的:

$('#domain').change(function() { 

    if (!this.sendToServer) { // some expando property I made up 
     var that = this; 
     this.sendToServer = setTimeout(function(that) { 
      // use "that" as a reference to your element that fired the onchange. 
      // Do your AJAX call here 
      that.sendToServer = undefined; 
     }, yourTimeoutTimeInMillis) 
    } 
    else { 
     clearTimeout(this.sendToServer); 
    } 
}); 
1

兩個變量,爲CharBuffer,sendFlag

  1. 使用的setTimeout有一個函數來每兩秒調用。
    • 此功能檢查緩衝區是否有東西在裏面。
    • 如果是這樣,它會發送/清空這些東西並清除發送的標誌(爲false)。
      • ,它也應該清除超時,並再次將其
    • 否則設置標誌(設置爲true)。
  2. 每次用戶點擊一個鍵,將其存儲在緩衝區中。
    • 如果發送標誌清除(它是假的),則什麼也不做。
    • 別人(這是真的)在緩衝當前發送/空的東西,並清除該標誌(假),
      • ,它也應該清除超時,並再次將其

這將使得它第一次按下按鍵,它被髮送,並且必須經過至少2秒才能再次發送。

可以使用一些調整,但我使用此設置來做類似的事情。

+0

在這種情況下,文本輸入字段可能是緩衝區......這可能是多餘的。 – 2009-11-18 18:16:02

0

我過這個問題來了越來越多的(我越做UI AJAX的東西),所以我這個打包成可用的插件here

相關問題