做兩件事後，兩秒鐘的keyup

我只是想實現這一點。如果用戶正在搜索關鍵字示例「stackoverflow」，我只想在此之後發送ajax調用。不是每次按任何鍵時。因此，每次按一個鍵時，我都可以節省大量的Ajax電話。做兩件事後，兩秒鐘的keyup

我試圖檢查，如果用戶在按任何鍵後沒有按兩秒再按任何鍵，然後我發送ajax呼叫。但我不知道如何使用間隔或設置超時時間，請幫助，並希望你能理解我想說明的內容。謝謝

這是我的小代碼。

$(document).ready(function(){ 
    var counter = 0; 
    $("#input").keyup(function(){ 

     var myInterval = setInterval(function() { 
      ++counter; 
     }, 1000); 

     if(myInterval > 2) 
     { 
      alert('ajax call going'); 
      clearInterval(myInterval); 
     } 
     else 
     { 
      alert('doing nothing'); 
     } 
    }) 
})

來源

2015-12-14 Tariq Husain

複製http://stackoverflow.com/questions/1836105/how-to-wait-5-seconds-with-jquery –

不重複的問題是不同的 –

var _changeInterval = null; 

$("#input").keyup(function() { 
    // wait untill user type in something 
    // Don't let call setInterval - clear it, user is still typing 
    clearInterval(_changeInterval) 
    _changeInterval = setInterval(function() { 
     // Typing finished, now you can Do whatever after 2 sec 
     clearInterval(_changeInterval) 
    }, 2000); 

});

注：代碼從SO幾個月收回，不請記住鏈接

編輯：

檢查此jsFiddle。在代碼中檢查註釋並在控制檯中輸出以獲得更好的替換效果

來源

2015-12-14 07:26:39

:)感謝代碼迄今爲止的最佳代碼，但我真的不知道它的工作方式。我無法理解流程 –

@TariqHusain請閱讀內置評論。如果仍然不清楚，我會盡力解釋它。 –

你已經清除了間隔clearInterval（_changeInterval）：那麼它在setInterval函數中仍然會在兩秒鐘後進入 –

試試這個：

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script> 
<input type="text" id="input"> 
<script> 
$(document).ready(function(){ 
    $("#input").keyup(function(){ 
     var str = $(this).val(); 
     setTimeout(function(){ 
      if(str == $("#input").val()) { 
       alert('ajax call going'); 
      } 
     }, 2000); 
    }); 
}); 
</script>

來源

2015-12-14 06:01:55

lastTime沒有定義 –

你可能會錯過第一行：var lastTime = new Date（）; –

仍然沒有工作，它不等待兩秒鐘。每當我按下後，它向上鍵提醒阿賈克斯呼籲去。 –

希望這將有助於...

$("#input").keyup(function(){ 
    var x=$("#input").val(); 
    setTimeout(function(){ 
     if(x==$("#input").val()) { 
      alert('ajax call going'); 
     } 
    }, 3000); 
});

來源

2015-12-14 06:07:15 Sameer

這不會幫助我。根據你的答案，如果我輸入堆棧它會結束Ajax調用5次，但晚了3秒。我只想一次不是5次 –

它不會調用ajax五次，因爲變量x正在檢查輸入的值，所以只有在用戶停止輸入時纔會發出ajax請求。這就是爲什麼3秒延遲 – Sameer

讓我先試試:) –

如果您的用戶連續輸入20個字符，然後呢？ setTimeout將在一段時間後（在您定義的秒數後）調用。如果你想要最正確的方法，那麼爲什麼不使用去抖動。

$(function(){ 

var default_text = $('#text-type').text(), 
    text_counter_1 = 0, 
    text_counter_2 = 0; 

// This function is not debounced, but instead bound directly to the event. 
function text_1() { 
    var val = $(this).val(), 
    html = 'Not-debounced AJAX request executed: ' + text_counter_1++ + ' times.' 
    + (val ? ' Text: ' + val : ''); 

    $('#text-type-1').html(html); 
}; 

// This function is debounced, and the new, debounced, function is bound to 
// the event. Note that in jQuery 1.4+ a reference to either the original or 
// debounced function can be passed to .unbind to unbind the function. 
function text_2() { 
    var val = $(this).val(), 
    html = 'Debounced AJAX request executed: ' + text_counter_2++ + ' times.' 
    + (val ? ' Text: ' + val : ''); 

    $('#text-type-2').html(html); 
}; 

// Bind the not-at-all debounced handler to the keyup event. 
$('input.text').keyup(text_1); 

// Bind the debounced handler to the keyup event. 
$('input.text').keyup($.debounce(250, text_2)); // This is the line you want! 

// Trigger the callbacks once to show some initial (zero) values. 
text_1(); 
text_2(); 
});

Blog這裏是活生生的例子
Blog 2

來源

2015-12-14 08:06:13

檢查新的接受答案，它工作知府 –

是的，這是最準確的答案+1 –

做兩件事後，兩秒鐘的keyup

回答

相關問題